ወደ ዋናው ይዘት ዝለል ወደ ሰነዶች ዳሰሳ ዝለል
Check
in English

ዝጋ አዝራር

እንደ ሞዳል እና ማንቂያዎች ያሉ ይዘቶችን ለማሰናበት አጠቃላይ የሆነ የመዝጊያ አዝራር።

ለምሳሌ

አንድን አካል ለማሰናበት ወይም ለመዝጋት አማራጭ ያቅርቡ .btn-close። ነባሪው የቅጥ አሰራር ውስን ነው፣ ግን በጣም ሊበጅ የሚችል ነው። ነባሪውን ለመተካት የ Sass ተለዋዋጮችን ያሻሽሉ background-image። እኛ እንዳደረግነው ለስክሪን አንባቢዎች ጽሑፍ ማካተትዎን እርግጠኛ ይሁኑaria-label

html
<button type="button" class="btn-close" aria-label="Close"></button>

የአካል ጉዳተኛ ሁኔታ

የተሰናከሉ መዝጊያ አዝራሮች የእነሱን ይለውጣሉ opacity። እንዲሁም ማንዣበብ እና ንቁ ግዛቶች እንዳይቀሰቀሱ ለመከላከል እና አመልክተናል pointer-events: noneuser-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%);