דלג לתוכן הראשי דלג לניווט במסמכים
in English

מצייני מקום

השתמש במצייני מיקום לטעינה עבור הרכיבים או הדפים שלך כדי לציין שמשהו עדיין נטען.

בעמוד זה

על אודות

ניתן להשתמש במצייני מיקום כדי לשפר את חוויית היישום שלך. הם בנויים רק עם HTML ו-CSS, כלומר אתה לא צריך שום JavaScript כדי ליצור אותם. עם זאת, תצטרך קצת 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 ::beforeכדי להבטיח כי heightהוא מכבד. אתה יכול להרחיב את התבנית הזו למצבים אחרים לפי הצורך, או להוסיף &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"רק מציין שהאלמנט צריך להיות מוסתר לקוראי מסך. התנהגות הטעינה של מציין המיקום תלויה באופן שבו המחברים ישתמשו בפועל בסגנונות מציין המיקום, כיצד הם מתכננים לעדכן דברים וכו'. ייתכן שיהיה צורך בקוד JavaScript כדי להחליף את מצב מציין המיקום ולהודיע ​​למשתמשי AT על העדכון.

רוֹחַב

אתה יכול לשנות את 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>

גודל

הגודל של .placeholders מבוסס על הסגנון הטיפוגרפי של אלמנט האב. התאם אישית אותם עם משנה גודל: .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;