in English
Kaw khawm
Lub pob kaw dav dav rau kev tso tawm cov ntsiab lus zoo li modals thiab ceeb toom.
Ntawm nplooj ntawv no
Piv txwv
Muab ib qho kev xaiv tso tseg los yog kaw ib feem nrog .btn-close
. Default styling yog txwv, tab sis customizable heev. Hloov kho Sass variables los hloov lub neej ntawd background-image
. Nco ntsoov suav nrog cov ntawv nyeem rau cov ntawv nyeem , raws li peb tau ua nrog aria-label
.
<button type="button" class="btn-close" aria-label="Close"></button>
Lub xeev tsis taus
Disabled kaw khawm hloov lawv opacity
. Peb kuj tau ua ntawv thov pointer-events: none
thiab user-select: none
tiv thaiv hover thiab active xeev los ntawm triggering.
<button type="button" class="btn-close" disabled aria-label="Close"></button>
Dawb variant
Hloov lub neej ntawd .btn-close
kom dawb nrog cov .btn-close-white
chav kawm. Chav kawm no siv cov filter
cuab yeej los hloov cov 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
Hloov pauv
$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%);