in English
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
.
<button type="button" class="btn-close" aria-label="Close"></button>
Uitgeschakelde staat
Uitgeschakelde sluitknoppen veranderen hun opacity
. We hebben ook toegepast pointer-events: none
en user-select: none
voorkomen dat hover en actieve statussen worden geactiveerd.
<button type="button" class="btn-close" disabled aria-label="Close"></button>
Witte variant
Verander de standaard .btn-close
in wit met de .btn-close-white
klasse. Deze klasse gebruikt de filter
eigenschap om de 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
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 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%);