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

ዝጋ አዝራር

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

ለምሳሌ

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

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

የአካል ጉዳተኛ ሁኔታ

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