Close Button
优质
小牛编辑
129浏览
2023-12-01
描述 (Description)
当您希望通过单击可以消除某些内容时,可以使用“关闭”按钮。 关闭按钮是一个《button》元素,它使用.close-button类。 乘法符号(×)用作X图标,它将包含在aria-hidden = "true"属性中,因此屏幕阅读器不会读取X图标。 为了阐明按钮的用途,它标有aria-label 。
单击关闭按钮不会关闭元素,但它可以与Toggler , Reveal , Off-canvas和其他包含打开/关闭操作的插件一起使用。
例子 (Example)
以下示例演示如何在Foundation中使用close button 。
<html>
<head>
<title>Close Button</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
</head>
<body>
<div class = "callout">
<button class = "close-button" aria-label = "Close alert" type = "button">
<span aria-hidden = "true">×</span>
</button>
<p>This is an example of close button!</p>
</div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>
Sass参考
变量 (Variables)
下表列出了项目设置文件中的SASS变量,该变量使该组件的默认样式得以自定义。
Sr.No. | 名称和描述 | 类型 | 默认值 |
---|---|---|---|
1 | $closebutton-position 它表示关闭按钮的默认位置。 第一个值和第二个值应分别为right或left和top或bottom 。 | List | 右上角 |
2 | $closebutton-offset-horizontal 它表示关闭按钮的右(或左)偏移。 | Number | 1rem |
3 | $closebutton-offset-vertical 它表示关闭按钮的顶部(或底部)偏移。 | Number | 0.5rem |
4 | $closebutton-size 它表示关闭按钮的默认字体大小。 | Number | 2em |
5 | $closebutton-lineheight 它表示关闭按钮的行高,影响元素的间距。 | Number | 1 |
6 | $closebutton-color 它代表关闭按钮的默认颜色。 | Color | $dark-gray |
7 | $closebutton-color-hover 它表示悬停时关闭按钮的默认颜色。 | Color | $black |
Mixins
要构建此组件的最终CSS输出,可以使用以下mixins。 要使用Foundation组件构建自己的类结构,可以自己使用mixins。
CLOSE-BUTTON
@include close-button;
通过使用设置变量中的样式,它可以添加关闭按钮的样式。