Laktawan sa panguna nga sulud Laktaw sa docs navigation
in English

Close button

Usa ka generic nga close button para sa pagdismiss sa content sama sa modals ug alerts.

Pananglitan

Paghatag og kapilian sa pagtangtang o pagsira sa usa ka component gamit ang .btn-close. Ang default nga pag-istilo limitado, apan labi ka mapasibo. Usba ang mga variable sa Sass aron mapulihan ang default background-image. Siguruha nga ilakip ang teksto alang sa mga magbabasa sa screen , sama sa among gibuhat sa aria-label.

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

Baldado nga estado

Ang mga disabled nga close button nag-ilis sa ilang opacity. Nag-aplay usab kami pointer-events: noneug user-select: nonearon mapugngan ang hover ug aktibo nga mga estado gikan sa pag-trigger.

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

Puti nga variant

Usba ang default .btn-closearon mahimong puti sa .btn-close-whiteklase. Kini nga klase naggamit sa filterkabtangan aron balihon ang 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

Mga variable

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