Close Button
描述 (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>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
保存上面给出的html代码foundation_close_button.html文件。
在浏览器中打开此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;
通过使用设置变量中的样式，它可以添加关闭按钮的样式。
