ಮುಖ್ಯ ವಿಷಯಕ್ಕೆ ತೆರಳಿ ಡಾಕ್ಸ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ತೆರಳಿ
Check
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. ಅವರು ಅಂಶದ ಒಳಗೆ ಪಠ್ಯವನ್ನು ಬದಲಾಯಿಸಬಹುದು ಅಥವಾ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಘಟಕಕ್ಕೆ ಮಾರ್ಪಡಿಸುವ ವರ್ಗವಾಗಿ ಸೇರಿಸಬಹುದು.

ಗೌರವಾನ್ವಿತವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಾವು ಹೆಚ್ಚುವರಿ ಸ್ಟೈಲಿಂಗ್ .btnಅನ್ನು ಅನ್ವಯಿಸುತ್ತೇವೆ . ಅಗತ್ಯವಿರುವಂತೆ ಇತರ ಸಂದರ್ಭಗಳಲ್ಲಿ ನೀವು ಈ ಮಾದರಿಯನ್ನು ವಿಸ್ತರಿಸಬಹುದು ಅಥವಾ ನಿಜವಾದ ಪಠ್ಯವನ್ನು ಅದರ ಸ್ಥಳದಲ್ಲಿ ಪ್ರದರ್ಶಿಸಿದಾಗ ಎತ್ತರವನ್ನು ಪ್ರತಿಬಿಂಬಿಸಲು ಅಂಶದೊಳಗೆ ಸೇರಿಸಬಹುದು.::beforeheight&nbsp;

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"ಅಂಶವನ್ನು ಪರದೆಯ ಓದುಗರಿಗೆ ಮರೆಮಾಡಬೇಕು ಎಂದು ಸೂಚಿಸುತ್ತದೆ. ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್‌ನ ಲೋಡಿಂಗ್ ನಡವಳಿಕೆಯು ಲೇಖಕರು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಶೈಲಿಗಳನ್ನು ಹೇಗೆ ಬಳಸುತ್ತಾರೆ, ಅವರು ವಿಷಯಗಳನ್ನು ನವೀಕರಿಸಲು ಹೇಗೆ ಯೋಜಿಸುತ್ತಾರೆ, ಇತ್ಯಾದಿಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುತ್ತದೆ . ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಸ್ಥಿತಿಯನ್ನು ಬದಲಾಯಿಸಲು ಮತ್ತು ಅಪ್‌ಡೇಟ್‌ನ AT ಬಳಕೆದಾರರಿಗೆ ತಿಳಿಸಲು ಕೆಲವು 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;