मुख्य सामग्री पर जाएँ docs नेविगेशनं प्रति गच्छतु
Check
in English

बटन बंद करें

मोडल्स् तथा अलर्ट् इत्यादीनां सामग्रीं निराकरणार्थं सामान्यं बन्दबटनम्।

उदाहरण

इत्यनेन सह घटकं निरस्तं कर्तुं वा बन्दं कर्तुं वा विकल्पं प्रदातव्यम् .btn-close। पूर्वनिर्धारितं स्टाइलिंग् सीमितम् अस्ति, परन्तु अत्यन्तं अनुकूलनीयम् अस्ति । पूर्वनिर्धारितं प्रतिस्थापयितुं Sass चर परिवर्तयन्तु background-image. स्क्रीन रीडर कृते पाठं अवश्यमेव समाविष्टं कुर्वन्तु , यथा वयं aria-label.

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

अक्षम अवस्था

अक्षम बन्द बटन परिवर्तित उनके opacity. वयं अपि प्रयुक्तवन्तः pointer-events: noneतथा user-select: noneच hover तथा active states इत्यस्य ट्रिगरिंग् इत्यस्य निवारणाय ।

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

श्वेत रूपान्तर

वर्गेण सह पूर्वनिर्धारितं .btn-closeश्वेतम् इति परिवर्तयन्तु । .btn-close-whiteअयं वर्गः filterगुणस्य उपयोगं कृत्वा background-image.

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