प्लेसहोल्डर हें नांव
कितेंय अजूनय लोड जावंक शकता तें दाखोवपाक तुमच्या घटकांखातीर वा पानांक लोड करपाचे प्लेसहोल्डर वापरात.
संबंदीं
तुमच्या ऍप्लिकेशनाचो अणभव वाडोवपाक प्लेसहोल्डर वापरूं येता. ते फकत HTML आनी CSS च्या आदारान तयार केल्यात, म्हळ्यार तीं तयार करपाक तुमकां कसलेंच जावास्क्रिप्ट जायना. तुमकां, मात, तांची दृश्यताय टॉगल करपाक कांय सानुकूल जावास्क्रिप्ट जाय पडटली. तांचें रूप, रंग, आनी आकार आमच्या उपयुक्तताय वर्गां वरवीं सहजतायेन अनुकूल करूं येता.
उदारण
सकयल दिल्ल्या उदाहरणांत, आमी एक खाशेलो कार्ड घटक घेतात आनी “लोडिंग कार्ड” तयार करपाक लागू केल्ल्या प्लेसहोल्डरां सयत तो परतून तयार करतात. आकार आनी प्रमाण ह्या दोगांयमदीं सारकें आसता.
कार्डाचें शीर्षक
कार्डाच्या शीर्षकाचेर उबारपाक आनी कार्डाच्या सामुग्रीचो व्हडलो वांटो तयार करपाक कांय बेगीन उदाहरण मजकूर.
खंय तरी जा<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card" aria-hidden="true">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title placeholder-glow">
<span class="placeholder col-6"></span>
</h5>
<p class="card-text placeholder-glow">
<span class="placeholder col-7"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
</div>
</div>
कशें काम करता
.placeholder
सेट करपाक वर्ग आनी ग्रिड स्तंभ वर्ग (देखीक, .col-6
) आशिल्ले प्लेसहोल्डर तयार करात width
. तांकां घटका भितरलो मजकूर बदलूं येता वा सद्याच्या घटकाक संशोधक वर्ग म्हणून जोडूंक मेळटा.
.btn
आमी s via कडेन अतिरिक्त स्टायलिंग लागू करतात ताका आदर ::before
मेळटा हाची खात्री करपाक . height
तुमी गरज पडल्यार हेर परिस्थितीं खातीर हो नमुनो वाडोवंक शकतात, वा
ताचे सुवातेर प्रत्यक्ष मजकूर रेंडर करतना उंचाय प्रतिबिंबीत करपाक घटका भितर एक जोडूंक शकतात.
<p aria-hidden="true">
<span class="placeholder col-6"></span>
</p>
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>
aria-hidden="true"
फकत घटक स्क्रीन रीडरांक लिपोवन दवरपाक जाय अशें दाखयता. प्लेसहोल्डराची लोडिंग
वर्तन लेखक प्रत्यक्षांत प्लेसहोल्डर शैली कशी वापरतले, ते गजाली कशी अद्ययावत करपाची येवजण करतात, आदीचेर आदारीत आसता.प्लेसहोल्डराची स्थिती स्वॅप करपाक आनी एटी वापरप्यांक अद्ययावताची म्हायती दिवपाक कांय जावास्क्रिप्ट कोडाची गरज
आसूं येता .
रुंदी
width
तुमी थ्रू ग्रिड स्तंभ वर्ग, रुंदाय उपयुक्तताय, वा इनलायन शैली बदलूं येतात .
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
रंग
पूर्वनिर्धारीतपणान, placeholder
वापरता currentColor
. हें सानुकूल रंग वा उपयुक्तताय वर्गान ओव्हररायड करूं येता.
<span class="placeholder col-12"></span>
<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>
आकारमान करप
s चो आकार .placeholder
पालक घटकाचे मुद्रण शैलीचेर आदारीत आसता. आकारमान संशोधकांनी त्यो पसंतीचे करात: .placeholder-lg
, .placeholder-sm
, वा .placeholder-xs
.
<span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 placeholder-sm"></span>
<span class="placeholder col-12 placeholder-xs"></span>
एनिमेशन करप
कितेंय सक्रियपणान लोड जाल्ल्याची धारणा चड बरी सांगपाक .placeholder-glow
वा प्लेसहोल्डरांक एनिमेट करात..placeholder-wave
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
सास
चड-उणें
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;