Ana içeriğe geç Dokümanlar navigasyonuna atla
in English

Kapat düğmesi

Modeller ve uyarılar gibi içerikleri kapatmak için genel bir kapat düğmesi.

Örnek

ile bir bileşeni kapatmak veya kapatmak için bir seçenek sağlayın .btn-close. Varsayılan stil sınırlıdır, ancak son derece özelleştirilebilir. Varsayılanı değiştirmek için Sass değişkenlerini değiştirin background-image. Daha önce yaptığımız gibi, ekran okuyucular için metin eklediğinizden emin olunaria-label .

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

Engelli durumu

Devre dışı bırakılan kapatma düğmeleri, opacity. Ayrıca vurgulu ve etkin durumların tetiklenmesini önlemek için pointer-events: noneve uyguladık.user-select: none

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

Beyaz varyant

Sınıfla birlikte varsayılanı .btn-closebeyaz olacak şekilde değiştirin .btn-close-white. Bu sınıf, filterözelliği tersine çevirmek için kullanır 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>

küstah

Değişkenler

$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%);