in English
ଛାୟା
ବାକ୍ସ-ଛାୟା ଉପଯୋଗୀତା ସହିତ ଉପାଦାନଗୁଡ଼ିକରେ ଛାୟା ଯୋଡନ୍ତୁ କିମ୍ବା ଅପସାରଣ କରନ୍ତୁ |
ଏହି ପୃଷ୍ଠାରେ |
ଉଦାହରଣଗୁଡିକ
ଯେତେବେଳେ ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ଛାୟାଗୁଡ଼ିକ ବୁଟଷ୍ଟ୍ରାପରେ ଡିଫଲ୍ଟ ଭାବରେ ଅକ୍ଷମ ହୋଇଥାଏ ଏବଂ ଏହା ମାଧ୍ୟମରେ ସକ୍ଷମ ହୋଇପାରିବ , ତୁମେ ଆମର ଉପଯୋଗିତା ଶ୍ରେଣୀଗୁଡ଼ିକ $enable-shadows
ସହିତ ଶୀଘ୍ର ଏକ ଛାୟା ଯୋଡି କିମ୍ବା ଅପସାରଣ କରିପାରିବ | box-shadow
ଏବଂ ତିନୋଟି ଡିଫଲ୍ଟ ଆକାର ପାଇଁ ସମର୍ଥନ ଅନ୍ତର୍ଭୂକ୍ତ .shadow-none
କରେ (ଯାହା ମେଳ ଖାଇବାକୁ ଭେରିଏବଲ୍ ସହିତ ଜଡିତ) |
ଛାଇ ନାହିଁ |
ଛୋଟ ଛାୟା |
ନିୟମିତ ଛାୟା |
ବଡ଼ ଛାୟା |
<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>
ସାସ୍ |
ଭେରିଏବଲ୍ |
$box-shadow: 0 .5rem 1rem rgba($black, .15);
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075);
$box-shadow-lg: 0 1rem 3rem rgba($black, .175);
$box-shadow-inset: inset 0 1px 2px rgba($black, .075);
ଉପଯୋଗିତା API
ଆମର ଉପଯୋଗିତା API ରେ ଛାୟା ଉପଯୋଗିତା ଘୋଷିତ ହୋଇଛି scss/_utilities.scss
| ଉପଯୋଗିତା API କିପରି ବ୍ୟବହାର କରିବେ ଶିଖନ୍ତୁ |
"shadow": (
property: box-shadow,
class: shadow,
values: (
null: $box-shadow,
sm: $box-shadow-sm,
lg: $box-shadow-lg,
none: none,
)
),