Bouton ya kokanga

Bouton ya kokanga générique pona ko rejeter ba contenus lokola ba modal na ba alertes.

Na lokasa oyo

Ndakisa

Pesa nzela ya koboya to kokanga eteni moko na .btn-close. Styling par défaut ezali limité, mais très personnalisable. Bobongola ba variables ya Sass mpo na ko remplacer ba défaut background-image. Kobosana te kotya makomi mpo na batángi ya écran , ndenge tosalaki na aria-label.

html

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

Etat ya désactivé

Ba boutons ya kokanga oyo ezali na makoki te ebongoli opacity. Tosaleli mpe pointer-events: nonempe user-select: nonempo na kopekisa hover mpe états actifs e déclencher.

html

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

Variante ya pembe

Bobongola défaut .btn-closempo ezala pembe na .btn-close-whitekelasi. Kelasi oyo esalela filterpropriété mpo na ko inverser 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 oyo azali

Ba variables oyo ezali

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