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%);