Pereiti prie pagrindinio turinio Pereiti prie dokumentų naršymo
Check
in English

Uždaryti mygtuką

Bendras uždarymo mygtukas, skirtas atmesti turinį, pvz., modalą ir įspėjimus.

Šiame puslapyje

Pavyzdys

Pateikite parinktį atsisakyti arba uždaryti komponentą naudodami .btn-close. Numatytasis stilius yra ribotas, bet labai pritaikomas. Modifikuokite Sass kintamuosius, kad pakeistumėte numatytuosius background-image. Būtinai įtraukite tekstą ekrano skaitytuvams , kaip tai padarėme su aria-label.

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

Neįgalus būsena

Išjungti uždarymo mygtukai keičia savo opacity. Taip pat pritaikėme pointer-events: noneir user-select: none, kad neleistume suaktyvinti užvedimo ir aktyvių būsenų.

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

Baltas variantas

Su klase pakeiskite numatytąjį nustatymą .btn-closeį baltą . .btn-close-whiteŠi klasė naudoja filtersavybę invertuoti 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

Kintamieji

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