Sluit knop

Een generieke sluitknop voor het sluiten van inhoud zoals modals en waarschuwingen.

Op deze pagina

Voorbeeld

Geef een optie om een onderdeel te sluiten of te sluiten met .btn-close. De standaardstijl is beperkt, maar in hoge mate aanpasbaar. Wijzig de Sass-variabelen om de standaard te vervangen background-image. Zorg ervoor dat u tekst voor schermlezers opneemt , zoals we hebben gedaan met aria-label.

html

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

Uitgeschakelde staat

Uitgeschakelde sluitknoppen veranderen hun opacity. We hebben ook toegepast pointer-events: noneen user-select: nonevoorkomen dat hover en actieve statussen worden geactiveerd.

html

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

Witte variant

Verander de standaard .btn-closein wit met de .btn-close-whiteklasse. Deze klasse gebruikt de filtereigenschap om de 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

Variabelen

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