متغیرهای
از متغیرهای بارگیری برای مؤلفه ها یا صفحات خود استفاده کنید تا نشان دهید ممکن است چیزی همچنان در حال بارگیری باشد.
در باره
از Placeholders می توان برای افزایش تجربه برنامه شما استفاده کرد. آنها فقط با 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 از طریق اعمال می کنیم ::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"
فقط نشان می دهد که عنصر باید برای صفحه خوان ها پنهان شود. رفتار
بارگیری مکاننما بستگی به نحوه استفاده نویسندگان از سبکهای نگهدارنده، نحوه برنامهریزی آنها برای بهروزرسانی چیزها، و غیره دارد. ممکن است برای
جابجایی وضعیت مکاننما و اطلاع کاربران AT از بهروزرسانی، به کدهای جاوا اسکریپت نیاز باشد.
عرض
میتوانید 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>
سایز بندی
اندازه .placeholder
s بر اساس سبک تایپوگرافی عنصر والد است. آنها را با اصلاح کننده های اندازه سفارشی کنید: .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;