Перейти до основного вмісту Перейти до навігації документами
Check
in English

Кнопка закриття

Загальна кнопка закриття для відхилення такого вмісту, як моди та сповіщення.

На цій сторінці

приклад

Надайте можливість відхилити або закрити компонент за допомогою .btn-close. Стиль за замовчуванням обмежений, але його можна налаштувати. Змініть змінні Sass, щоб замінити значення за замовчуванням background-image. Обов’язково додайте текст для програм зчитування з екрана , як ми зробили з aria-label.

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

Відключений стан

Вимкнені кнопки закриття змінюють свої opacity. Ми також застосували pointer-events: noneі user-select: none, щоб запобігти активації наведень і активних станів.

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

Білий варіант

Змініть за замовчуванням .btn-closeбілий за допомогою .btn-close-whiteкласу. Цей клас використовує filterвластивість інвертувати background-image.

html
<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>

Сасс

Змінні

$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 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-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%);