Close Button

优质
小牛编辑
129浏览
2023-12-01

描述 (Description)

当您希望通过单击可以消除某些内容时,可以使用“关闭”按钮。 关闭按钮是一个《button》元素,它使用.close-button类。 乘法符号(×)用作X图标,它将包含在aria-hidden = "true"属性中,因此屏幕阅读器不会读取X图标。 为了阐明按钮的用途,它标有aria-label

单击关闭按钮不会关闭元素,但它可以与TogglerRevealOff-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

它表示关闭按钮的默认位置。 第一个值和第二个值应分别为rightlefttopbottom

List右上角
2

$closebutton-offset-horizontal

它表示关闭按钮的右(或左)偏移。

Number1rem
3

$closebutton-offset-vertical

它表示关闭按钮的顶部(或底部)偏移。

Number0.5rem
4

$closebutton-size

它表示关闭按钮的默认字体大小。

Number2em
5

$closebutton-lineheight

它表示关闭按钮的行高,影响元素的间距。

Number1
6

$closebutton-color

它代表关闭按钮的默认颜色。

Color$dark-gray
7

$closebutton-color-hover

它表示悬停时关闭按钮的默认颜色。

Color$black

Mixins

要构建此组件的最终CSS输出,可以使用以下mixins。 要使用Foundation组件构建自己的类结构,可以自己使用mixins。

CLOSE-BUTTON

@include close-button;

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