Placeholders

Χρησιμοποιήστε σύμβολα κράτησης θέσης φόρτωσης για τα στοιχεία ή τις σελίδες σας για να υποδείξετε ότι κάτι μπορεί να εξακολουθεί να φορτώνεται.

Σε αυτήν την σελίδα

Σχετικά με

Τα placeholders μπορούν να χρησιμοποιηθούν για να βελτιώσουν την εμπειρία της εφαρμογής σας. Είναι κατασκευασμένα μόνο με HTML και CSS, που σημαίνει ότι δεν χρειάζεστε JavaScript για να τα δημιουργήσετε. Ωστόσο, θα χρειαστείτε κάποια προσαρμοσμένη 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. Μπορούν να αντικαταστήσουν το κείμενο μέσα σε ένα στοιχείο ή να προστεθούν ως κλάση τροποποιητή σε ένα υπάρχον στοιχείο.

Εφαρμόζουμε πρόσθετο στυλ στα .btns via ::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>

Η χρήση του aria-hidden="true"υποδεικνύει μόνο ότι το στοιχείο πρέπει να είναι κρυφό στους αναγνώστες οθόνης. Η συμπεριφορά φόρτωσης του placeholder εξαρτάται από τον τρόπο με τον οποίο οι συντάκτες θα χρησιμοποιήσουν πραγματικά τα στυλ κράτησης θέσης, τον τρόπο με τον οποίο σχεδιάζουν να ενημερώσουν πράγματα κ.λπ. Μπορεί να χρειαστεί κάποιος κώδικας JavaScript για την εναλλαγή της κατάστασης του placeholder και την ενημέρωση των χρηστών 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>

Sass

Μεταβλητές

$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;