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