Pāriet uz galveno saturu Pāriet uz dokumentu navigāciju
in English

Aizvērt poga

Vispārēja aizvēršanas poga tāda satura kā modālu un brīdinājumu noraidīšanai.

Piemērs

Nodrošiniet iespēju noraidīt vai aizvērt komponentu, izmantojot .btn-close. Noklusējuma stils ir ierobežots, taču tas ir ļoti pielāgojams. Modificējiet Sass mainīgos, lai aizstātu noklusējuma vērtību background-image. Noteikti iekļaujiet tekstu ekrāna lasītājiem , kā mēs to darījām ar aria-label.

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

Atspējots stāvoklis

Atspējotās aizvēršanas pogas maina to opacity. Mēs esam arī piemērojuši pointer-events: noneun user-select: nonelai novērstu kursora novietošanas un aktīvo stāvokļu aktivizēšanu.

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

Balts variants

Mainiet noklusējuma .btn-closevērtību uz baltu ar .btn-close-whiteklasi. Šī klase izmanto filterīpašību, lai invertētu 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

Mainīgie lielumi

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