ਬੰਦ ਕਰੋ ਬਟਨ

ਮਾਡਲਾਂ ਅਤੇ ਚੇਤਾਵਨੀਆਂ ਵਰਗੀ ਸਮੱਗਰੀ ਨੂੰ ਖਾਰਜ ਕਰਨ ਲਈ ਇੱਕ ਆਮ ਬੰਦ ਬਟਨ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਉਦਾਹਰਨ

ਨਾਲ ਕਿਸੇ ਹਿੱਸੇ ਨੂੰ ਖਾਰਜ ਜਾਂ ਬੰਦ ਕਰਨ ਦਾ ਵਿਕਲਪ ਪ੍ਰਦਾਨ ਕਰੋ .btn-close। ਡਿਫੌਲਟ ਸਟਾਈਲਿੰਗ ਸੀਮਤ ਹੈ, ਪਰ ਬਹੁਤ ਜ਼ਿਆਦਾ ਅਨੁਕੂਲਿਤ ਹੈ। ਡਿਫੌਲਟ ਨੂੰ ਬਦਲਣ ਲਈ Sass ਵੇਰੀਏਬਲ ਨੂੰ ਸੋਧੋ background-image। ਸਕਰੀਨ ਰੀਡਰਾਂ ਲਈ ਪਾਠ ਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ , ਜਿਵੇਂ ਕਿ ਅਸੀਂ ਨਾਲ ਕੀਤਾ ਹੈ aria-label।

html

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

ਅਪਾਹਜ ਸਥਿਤੀ

ਅਯੋਗ ਬੰਦ ਬਟਨ ਆਪਣੇ ਬਦਲਦੇ ਹਨ opacity। ਅਸੀਂ ਹੋਵਰ ਅਤੇ ਕਿਰਿਆਸ਼ੀਲ ਅਵਸਥਾਵਾਂ ਨੂੰ ਟ੍ਰਿਗਰ ਹੋਣ ਤੋਂ ਰੋਕਣ ਲਈ ਵੀ ਅਰਜ਼ੀ pointer-events: noneਦਿੱਤੀ ਹੈ।user-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%);