Langkau ke kandungan utama Langkau ke navigasi dokumen
Check
in English

Butang tutup

Butang tutup generik untuk mengetepikan kandungan seperti modal dan makluman.

Pada halaman ini

Contoh

Sediakan pilihan untuk mengetepikan atau menutup komponen dengan .btn-close. Penggayaan lalai adalah terhad, tetapi sangat boleh disesuaikan. Ubah suai pembolehubah Sass untuk menggantikan lalai background-image. Pastikan anda memasukkan teks untuk pembaca skrin , seperti yang telah kami lakukan dengan aria-label.

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

Keadaan kurang upaya

Butang tutup yang dilumpuhkan menukar opacity. Kami juga telah memohon pointer-events: nonedan user-select: nonemenghalang keadaan tuding dan aktif daripada dicetuskan.

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

Varian putih

Tukar lalai .btn-closemenjadi putih dengan .btn-close-whitekelas. Kelas ini menggunakan filtersifat untuk menyongsangkan 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>

Sass

Pembolehubah

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