ப்ளாஸ்ஹோல்டர்கள்

ஏதேனும் இன்னும் ஏற்றப்படுவதைக் குறிக்க, உங்கள் கூறுகள் அல்லது பக்கங்களுக்கு ஏற்றுதல் ஒதுக்கிடங்களைப் பயன்படுத்தவும்.

இந்தப் பக்கத்தில்

பற்றி

உங்கள் பயன்பாட்டின் அனுபவத்தை மேம்படுத்த, ப்ளேஸ்ஹோல்டர்களைப் பயன்படுத்தலாம். அவை HTML மற்றும் CSS உடன் மட்டுமே உருவாக்கப்பட்டுள்ளன, அதாவது அவற்றை உருவாக்க உங்களுக்கு JavaScript எதுவும் தேவையில்லை. இருப்பினும், அவற்றின் தெரிவுநிலையை மாற்ற உங்களுக்கு சில தனிப்பயன் ஜாவாஸ்கிரிப்ட் தேவைப்படும். அவற்றின் தோற்றம், நிறம் மற்றும் அளவை எங்கள் பயன்பாட்டு வகுப்புகள் மூலம் எளிதாக தனிப்பயனாக்கலாம்.

உதாரணமாக

கீழே உள்ள எடுத்துக்காட்டில், நாங்கள் ஒரு பொதுவான கார்டு கூறுகளை எடுத்து, "லோடிங் கார்டை" உருவாக்குவதற்குப் பயன்படுத்தப்படும் பிளேஸ்ஹோல்டர்களுடன் மீண்டும் உருவாக்குகிறோம். இரண்டுக்கும் இடையே அளவும் விகிதாச்சாரமும் ஒன்றுதான்.

அட்டை தலைப்பு

கார்டின் தலைப்பில் உருவாக்க மற்றும் கார்டின் உள்ளடக்கத்தின் பெரும்பகுதியை உருவாக்க சில விரைவான எடுத்துக்காட்டு உரை.

எங்காவது போ

<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கள் வழியாக கூடுதல் ஸ்டைலிங்கைப் பயன்படுத்துகிறோம் . தேவைக்கேற்ப மற்ற சூழ்நிலைகளுக்கு இந்த வடிவத்தை நீட்டிக்கலாம் அல்லது உண்மையான உரையை அதன் இடத்தில் வழங்கும்போது உயரத்தைப் பிரதிபலிக்கும் வகையில் உறுப்புக்குள் ஒன்றைச் சேர்க்கலாம்.::beforeheight 

html

<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 குறியீடு தேவைப்படலாம் .

அகலம்

widthநீங்கள் கட்ட நெடுவரிசை வகுப்புகள், அகல பயன்பாடுகள் அல்லது இன்லைன் பாணிகள் மூலம் மாற்றலாம் .

html

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

நிறம்

இயல்பாக, placeholderபயன்பாடுகள் currentColor. இது தனிப்பயன் வண்ணம் அல்லது பயன்பாட்டு வகுப்பின் மூலம் மேலெழுதப்படலாம்.

html

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

html

<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

html

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