Preskoči na glavno vsebino Preskoči na navigacijo po dokumentih
in English

Gumb za zapiranje

Splošni gumb za zapiranje za opustitev vsebine, kot so modali in opozorila.

Primer

Omogočite možnost opustitve ali zapiranja komponente z .btn-close. Privzeti stil je omejen, vendar zelo prilagodljiv. Spremenite spremenljivke Sass, da nadomestite privzeto background-image. Ne pozabite vključiti besedila za bralnike zaslona , ​​kot smo storili z aria-label.

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

Onemogočeno stanje

Onemogočeni gumbi za zapiranje spremenijo svoj opacity. Uporabili smo tudi pointer-events: nonein user-select: noneza preprečevanje sprožitve lebdenja in aktivnih stanj.

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

Bela varianta

Spremenite privzeto .btn-closena belo z .btn-close-whiterazredom. Ta razred uporablja filterlastnost za obračanje 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>

Sass

Spremenljivke

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