স্থানধারক

সম্পর্কিত

আপনার আবেদনের অভিজ্ঞতা বাড়াতে প্লেসহোল্ডার ব্যবহার করা যেতে পারে। এগুলি শুধুমাত্র এইচটিএমএল এবং সিএসএস দিয়ে তৈরি করা হয়েছে, যার অর্থ এগুলি তৈরি করতে আপনার কোনও জাভাস্ক্রিপ্টের প্রয়োজন নেই৷ তবে তাদের দৃশ্যমানতা টগল করতে আপনার কিছু কাস্টম জাভাস্ক্রিপ্টের প্রয়োজন হবে। তাদের চেহারা, রঙ এবং আকার আমাদের ইউটিলিটি ক্লাসের সাথে সহজেই কাস্টমাইজ করা যেতে পারে।

উদাহরণ

নীচের উদাহরণে, আমরা একটি সাধারণ কার্ডের উপাদান নিয়েছি এবং একটি "লোডিং কার্ড" তৈরি করতে প্রয়োগ করা স্থানধারকগুলির সাথে এটি পুনরায় তৈরি করি। উভয়ের মধ্যে আকার এবং অনুপাত একই।

<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>

প্রস্থ

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বা .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;