बटन बंद करो

मोडल ते अलर्ट जनेह् सामग्री गी खारिज करने आस्तै इक जेनेरिक बंद बटन।

इस पेज पर

मसाल

कन्नै इक घटक गी खारिज करने जां बंद करने दा विकल्प उपलब्ध करोआओ .btn-close. डिफ़ॉल्ट स्टाइलिंग सीमित ऐ, पर बेह् तर अनुकूलन योग्य ऐ। डिफाल्ट गी बदलने लेई Sass चर गी संशोधित करो background-image. स्क्रीन रीडरें लेई पाठ जरूर शामल करो , जि'यां असें aria-label.

एचटीएमएल ऐ

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

अक्षम राज्य

अक्षम बंद बटन अपने opacity. अस बी लागू कीता ऐ pointer-events: noneते user-select: noneहोवर ते सक्रिय राज्यें गी ट्रिगर होने थमां रोकने लेई।

एचटीएमएल ऐ

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

सफेद वेरिएंट

क्लास .btn-closeकन्नै डिफाल्ट गी सफेद करने आस्तै बदलो . .btn-close-whiteएह् वर्ग filterउल्टा करने आस्तै गुण दा उपयोग करदा ऐ 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>

सस्स

चर करने वाले

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