Mandehana any amin'ny votoaty fototra Mandehana any amin'ny docs navigation
in English

bokotra akaiky

Bokotra akatona ankapobeny hanilihana votoaty toy ny modals sy fanairana.

OHATRA

Omeo safidy hanilihana na hanakatona singa iray miaraka amin'ny .btn-close. Voafetra ny styling default, saingy azo zahana be. Ovao ny fari-piadidiana Sass hanoloana ny default background-image. Aza hadino ny mampiditra lahatsoratra ho an'ny mpamaky efijery , toy ny efa nataontsika tamin'ny aria-label.

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

Fanjakana kilemaina

Ny bokotra fanakatonana kilemaina dia manova ny opacity. Nampihatra ihany koa izahay pointer-events: noneary user-select: nonemba hisorohana ny fanenjehana sy ny fanjakana mavitrika.

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

Variant fotsy

Hanova ny default .btn-closeho fotsy miaraka amin'ny .btn-close-whitekilasy. Ity kilasy ity dia mampiasa ny filterfananana hamadika ny 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

hiovaova

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