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.

html

<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: nonethiab user-select: nonetiv thaiv hover thiab active xeev los ntawm triggering.

html

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

Dawb variant

Hloov lub neej ntawd .btn-closekom dawb nrog cov .btn-close-whitechav kawm. Chav kawm no siv cov filtercuab yeej los hloov cov 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

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