ප්‍රධාන අන්තර්ගතය වෙත යන්න ලේඛන සංචාලනය වෙත යන්න
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%);