关闭按钮

这个简洁的关闭按钮可以用在任何您需要点击关闭的地方。

关闭按钮是一个带有 .close-button 类的 <button> 元素。我们使用乘号 (×) 作为 X 图标。此图标包含在 <span> 中，并带有属性 aria-hidden="true"，因此屏幕阅读器不会读取 X 图标。

该按钮还标有 aria-label，以阐明按钮的用途。

在视频中观看此部分

<div class="callout" data-closable>
  <button class="close-button" aria-label="Close alert" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
  <p>Look at this close button!</p>
</div>

看看这个关闭按钮！

使其可关闭

关闭按钮本身不会关闭元素，但您可以将其与切换器、显示、侧边栏以及其他具有打开和关闭行为的插件一起使用。

任何元素都可以用作关闭触发器，而不仅仅是关闭按钮。将属性 data-close 添加到标注内的任何元素都会将其变成关闭触发器。

以下示例将标注与关闭按钮组件和 data-closable 属性配对，以创建可关闭的警告框。

在视频中观看此部分

<div class="callout" data-closable>
  <p>You can so totally close this!</p>
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="success callout" data-closable="slide-out-right">
  <p>You can close me too, and I close using a Motion UI animation.</p>
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
</div>

您可以完全关闭它！

您也可以关闭我，我使用 Motion UI 动画关闭。

Sass 参考

变量

可以使用项目设置文件中的以下 Sass 变量来自定义此组件的默认样式。

名称	类型	默认值	描述
`$closebutton-position`	列表	`右上`	关闭按钮的默认位置。第一个值应为 `右` 或 `左`，第二个值应为 `上` 或 `下`。
`$closebutton-z-index`	数字	`10`	关闭按钮的默认 z-index。
`$closebutton-default-size`	字符串	`中等`	用作默认值的按钮大小
`$closebutton-offset-horizontal`	数字或映射	`小：0.66rem 中等：1rem`	关闭按钮的右（或左）偏移量。
`$closebutton-offset-vertical`	数字或映射	`小：0.33em 中等：0.5rem`	关闭按钮的上（或下）偏移量。
`$closebutton-size`	数字或映射	`小：1.5em 中等：2em`	关闭按钮的大小。用于生成大小修饰符。
`$closebutton-lineheight`	数字	`1`	关闭按钮的行高。它会影响元素的间距。
`$closebutton-color`	颜色	`$dark-gray`	关闭按钮的默认颜色。
`$closebutton-color-hover`	颜色	`$black`	鼠标悬停在关闭按钮上时的默认颜色。

混合宏

我们使用这些混合宏来构建此组件的最终 CSS 输出。您可以自己使用这些混合宏，从我们的组件中构建出自己的类结构。

close-button-size

@include close-button-size($size);

设置关闭按钮的大小和位置。

参数	类型	默认值	描述
`$size`	关键字	`中等`	要使用的大小。设置为 `小` 可创建小型关闭按钮。`$closebutton-*` 变量中定义的“中等”值将用作关闭按钮的默认大小和位置。

close-button

@include close-button;

使用设置变量中的样式为关闭按钮添加样式。