in English
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: none
và 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-close
thành màu trắng với .btn-close-white
lớp. Lớp này sử dụng thuộc filter
tí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%);