in English
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
.
<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: none
mpe user-select: none
mpo na kopekisa hover mpe états actifs e déclencher.
<button type="button" class="btn-close" disabled aria-label="Close"></button>
Variante ya pembe
Bobongola défaut .btn-close
mpo ezala pembe na .btn-close-white
kelasi. Kelasi oyo esalela filter
propriété mpo na ko inverser 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 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 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%);