मुख्य विषयवस्तु में जाएं डॉक्स नेविगेशन पर जाएं
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 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%);