مرکزی مواد پر جائیں۔ ڈاکس نیویگیشن پر جائیں۔
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 پر اضافی اسٹائل لگاتے ہیں کہ اس کا احترام کیا جائے۔ آپ ضرورت کے مطابق دیگر حالات کے لیے اس پیٹرن کو بڑھا سکتے ہیں، یا جب اصل متن کو اس کی جگہ پر پیش کیا جاتا ہے تو اونچائی کو ظاہر کرنے کے لیے عنصر کے اندر ایک عنصر شامل کر سکتے ہیں۔::beforeheight&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"اس بات کی نشاندہی کرتا ہے کہ عنصر کو اسکرین ریڈرز کے لیے چھپایا جانا چاہیے۔ پلیس ہولڈر کا لوڈ کرنے کا رویہ اس بات پر منحصر ہوتا ہے کہ مصنفین اصل میں پلیس ہولڈر کے انداز کو کس طرح استعمال کریں گے، وہ چیزوں کو کیسے اپ ڈیٹ کرنے کا ارادہ رکھتے ہیں، وغیرہ۔ پلیس ہولڈر کی حالت کو تبدیل کرنے اور AT صارفین کو اپ ڈیٹ سے آگاہ کرنے کے لیے کچھ JavaScript کوڈ کی ضرورت پڑ سکتی ہے۔

چوڑائی

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, or .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;