बंद करें बटन

मोडल और अलर्ट जैसी सामग्री को खारिज करने के लिए एक सामान्य क्लोज बटन।

इस पृष्ठ पर

उदाहरण

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