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