Негізгі мазмұнға өту Құжаттар шарлауына өту
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%);