Luncat ka eusi utama Luncat ka navigasi docs
Check
in English

Tombol tutup

Tombol tutup umum pikeun ngaleungitkeun eusi sapertos modal sareng panggeuing.

Dina kaca ieu

Contona

Nyadiakeun pilihan pikeun ngilangkeun atawa nutup hiji komponén kalawan .btn-close. Styling standar diwatesan, tapi kacida customizable. Robah variabel Sass pikeun ngagentos standar background-image. Pastikeun pikeun ngalebetkeun téks pikeun pamiarsa layar , sapertos anu parantos kami lakukeun aria-label.

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

kaayaan ditumpurkeun

Tombol tutup ditumpurkeun ngarobah opacity. Kami ogé parantos nerapkeun pointer-events: nonesareng user-select: nonepikeun nyegah hover sareng kaayaan aktip tina pemicu.

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

Varian bodas

Robah standar .btn-closejanten bodas sareng .btn-close-whitekelas. Kelas ieu ngagunakeun filtersipat pikeun ngabalikeun 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

Variabel

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