Saltu al ĉefa enhavo Saltu al navigado de dokumentoj
in English

Fermi butonon

Ĝenerala fermbutono por forĵeti enhavon kiel modaloj kaj atentigoj.

Ekzemplo

Provizi eblon por malakcepti aŭ fermi komponanton per .btn-close. Defaŭlta stilo estas limigita, sed tre agordebla. Modifi la Sass-variablojn por anstataŭigi la defaŭltan background-image. Nepre enmetu tekston por ekranlegiloj , kiel ni faris kun aria-label.

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

Malfunkciigita ŝtato

Malŝaltitaj fermbutonoj ŝanĝas sian opacity. Ni ankaŭ aplikis pointer-events: nonekaj user-select: nonemalhelpi ŝvebadon kaj aktivajn statojn ekfunkciigi.

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

Blanka varianto

Ŝanĝu la defaŭltan .btn-closepor esti blanka kun la .btn-close-whiteklaso. Ĉi tiu klaso uzas la filterposedaĵon por inversigi la 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

Variabloj

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