بٹن بند کریں۔

موڈلز اور الرٹس جیسے مواد کو مسترد کرنے کے لیے ایک عام بند بٹن۔

اس صفحہ پر

مثال

کے ساتھ کسی جزو کو برخاست یا بند کرنے کا اختیار فراہم کریں .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

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