मुख्य सामग्री पर जाओ डॉक्स नेविगेशन पर जाओ
Check
in English

बटन बंद करो

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

मसाल

कन्नै इक घटक गी खारिज करने जां बंद करने दा विकल्प उपलब्ध करोआओ .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%);