关闭按钮
这是一个通用的关闭按钮(close button)组件,用于关闭诸如模态框(modal)和警告框(alert)之类的窗口。
示例
本组件通过 .btn-close
类提供了一个关闭其它组件的方式。默认样式不多,但可定制度高。通过修改 Sass 变量可替换默认的 background-image
。请务必为屏幕阅读器添加说明性文字,就像下面示例中的 aria-label
一样。
<button type="button" class="btn-close" aria-label="Close"></button>
禁用状态
处于禁用状态的关闭按钮(close button)会改变自己的透明度 opacity
属性。我们还设置了 pointer-events: none
和 user-select: none
来防止鼠标悬停和活动状态被触发。
<button type="button" class="btn-close" disabled aria-label="Close"></button>
白色变体
将默认的 .btn-close
类修改为 .btn-close-white
类,可将按钮改变为白色。.btn-close-white
类是使用 filter
属性来实现 background-image
反色的。
<button type="button" class="btn-close btn-close-white" aria-label="Close"></button> <button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>