in English
Knop slute
In generyske slute knop foar it ôfwizen fan ynhâld lykas modalen en warskôgings.
Op dizze side
Foarbyld
Biede in opsje om in komponint te ferwiderjen of te sluten mei .btn-close
. Standert styling is beheind, mar tige oanpasber. Feroarje de Sass-fariabelen om de standert te ferfangen background-image
. Wês wis dat jo tekst opnimme foar skermlêzers , lykas wy hawwe dien mei aria-label
.
<button type="button" class="btn-close" aria-label="Close"></button>
Utskeakele steat
Utskeakele slute knoppen feroarje harren opacity
. Wy hawwe ek tapast pointer-events: none
en user-select: none
om te foarkommen dat hover en aktive steaten trigger.
<button type="button" class="btn-close" disabled aria-label="Close"></button>
Wite fariant
Feroarje de standert .btn-close
om wyt te wêzen mei de .btn-close-white
klasse. Dizze klasse brûkt it filter
pân 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
Fariabelen
$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%);