شوێنگرەوەکان

دەربارەی

دەتوانرێت شوێنهەڵگرەکان بەکاربهێنرێت بۆ بەرزکردنەوەی ئەزموونی بەرنامەکەت. تەنها بە 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. دەتوانن دەقەکە لەناو توخمێکدا بگۆڕن یان وەک پۆلێکی دەستکاریکەر بۆ پێکهاتەیەکی هەبوو زیاد بکرێن.

ئێمە ستایلێکی زیادە بەکاردەهێنین بۆ .btns 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>

پانی

دەتوانیت 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>

قەبارەدانان

قەبارەی .placeholders لەسەر بنەمای شێوازی تایپۆگرافی توخمە باوکەکە دامەزراوە. بە دەستکاریکەری قەبارەدانان خۆکارانەیان بکە: .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;