ਮੁੱਖ ਸਮੱਗਰੀ ਤੇ ਜਾਓ ਡੌਕਸ ਨੈਵੀਗੇਸ਼ਨ 'ਤੇ ਜਾਓ
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%);