बटन बंद कर दिहल जाव

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

एह पन्ना पर दिहल गइल बा

उदाहरण

के साथ कवनो घटक के खारिज करे भा बंद करे के विकल्प उपलब्ध कराईं .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%);