Saltatu eduki nagusira Saltatu dokumentuen nabigaziora
Check
in English

Itxi botoia

Itxi botoi generikoa moduak eta alertak bezalako edukia baztertzeko.

Orrialde honetan

Adibidea

Eman osagai bat baztertzeko edo ixteko aukera .btn-close. Estilo lehenetsia mugatua da, baina oso pertsonalizagarria. Aldatu Sass aldagaiak lehenetsia ordezkatzeko background-image. Ziurtatu pantaila-irakurleentzako testua sartzen duzula , honekin egin dugun bezala aria-label.

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

Ezindu egoera

Desgaituta dauden ixteko botoiek beren opacity. pointer-events: nonePasatzeko eta user-select: noneegoera aktiboak abiaraztea saihesteko ere aplikatu dugu .

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

Aldaera zuria

Aldatu lehenetsia klasearekin .btn-closezuria izateko . .btn-close-whiteKlase honek filterpropietatea erabiltzen du 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

Aldagaiak

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