تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
in English

العناصر النائبة

استخدم العناصر النائبة للتحميل لمكوناتك أو صفحاتك للإشارة إلى احتمال استمرار تحميل شيء ما.

على هذه الصفحة

حول

يمكن استخدام العناصر النائبة لتحسين تجربة التطبيق الخاص بك. لقد تم إنشاؤها باستخدام HTML و CSS فقط ، مما يعني أنك لست بحاجة إلى أي JavaScript لإنشائها. ومع ذلك ، ستحتاج إلى بعض جافا سكريبت مخصص لتبديل رؤيتها. يمكن تخصيص مظهرها ولونها وحجمها بسهولة باستخدام فئات المرافق الخاصة بنا.

مثال

في المثال أدناه ، نأخذ مكونًا نموذجيًا للبطاقة ونعيد إنشائه باستخدام عناصر نائبة مطبقة لإنشاء "بطاقة تحميل". الحجم والنسب هي نفسها بين الاثنين.

Placeholder
عنوان البطاقة

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

اذهب لمكان ما 
<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احترامه. يمكنك تمديد هذا النمط لمواقف أخرى حسب الحاجة ، أو إضافة &nbsp;داخل العنصر ليعكس الارتفاع عند عرض النص الفعلي في مكانه.

<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"فقط إلى أنه يجب إخفاء العنصر عن برامج قراءة الشاشة. يعتمد سلوك تحميل العنصر النائب على كيفية استخدام المؤلفين لأنماط العنصر النائب ، وكيف يخططون لتحديث الأشياء ، وما إلى ذلك. قد تكون هناك حاجة إلى بعض تعليمات JavaScript البرمجية لتبديل حالة العنصر النائب وإبلاغ مستخدمي 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>

تحجيم

يعتمد حجم .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;