عناصر النائبة (Placeholders)

حول (About)

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

مثال

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

<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 class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
  </div>
</div>

كيف يعمل ؟

قم بإنشاء عناصر نائبة باستخدام الفئة .placeholder وفئة أعمدة الشبكة (على سبيل المثال .col-6) لتعيين الـ width. يمكنها استبدال النص داخل العنصر أو إضافتها كفئة معدلة لمكون موجود.

نحن نطبق تنسيقاً إضافياً على الـ .btn عبر ::before لضمان احترام الـ height. يمكنك توسيع هذا النمط لحالات أخرى حسب الحاجة، أو إضافة   داخل العنصر ليعكس الارتفاع عندما يتم عرض النص الفعلي في مكانه.

<p aria-hidden="true">
  <span class="placeholder col-6"></span>
</p>

<a class="btn btn-primary disabled placeholder col-4" aria-disabled="true"></a>

العرض (Width)

يمكنك تغيير الـ width من خلال فئات أعمدة الشبكة، أو أدوات العرض المساعدة، أو الأنماط المضمنة (inline styles).

<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>

اللون

بشكل افتراضي، تستخدم الـ placeholder قيمة currentColor. يمكنما تجاوز ذلك باستخدام لون مخصص أو فئة مساعدة (utility class).

<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 على النمط الطباعي للعنصر الأب. يمكنك تخصيصها باستخدام معدلات الحجم: .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>

التحريك (Animation)

قم بتحريك عناصر النائبة (placeholders) باستخدام .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>

الـ (CSS)

متغيرات الـ (Sass)

$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;