Close Button

优质

小牛编辑

125浏览

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;

通过使用设置变量中的样式，它可以添加关闭按钮的样式。