Nút đóng

Một nút đóng chung để loại bỏ nội dung như phương thức và cảnh báo.

Trên trang này

Thí dụ

Cung cấp một tùy chọn để loại bỏ hoặc đóng một thành phần với .btn-close. Kiểu dáng mặc định bị hạn chế, nhưng có thể tùy chỉnh cao. Sửa đổi các biến Sass để thay thế giá trị mặc định background-image. Đảm bảo bao gồm văn bản cho trình đọc màn hình , như chúng tôi đã làm với aria-label.

<button type="button" class="btn-close" aria-label="Close"></button>

Trạng thái bị vô hiệu hóa

Các nút đóng bị vô hiệu hóa sẽ thay đổi chúng opacity. Chúng tôi cũng đã áp dụng pointer-events: nonevà user-select: noneđể ngăn kích hoạt trạng thái di chuột và trạng thái đang hoạt động.

<button type="button" class="btn-close" disabled aria-label="Close"></button>

Biến thể màu trắng

Thay đổi mặc định .btn-closethành màu trắng với .btn-close-whitelớp. Lớp này sử dụng thuộc filtertính để đảo ngược 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>

Sass

Biến

$btn-close-width:            1em;
$btn-close-height:           $btn-close-width;
$btn-close-padding-x:        .25em;
$btn-close-padding-y:        $btn-close-padding-x;
$btn-close-color:            $black;
$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
$btn-close-focus-shadow:     $input-btn-focus-box-shadow;
$btn-close-opacity:          .5;
$btn-close-hover-opacity:    .75;
$btn-close-focus-opacity:    1;
$btn-close-disabled-opacity: .25;
$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%);