Segnaposto

Utilizza i segnaposto di caricamento per i componenti o le pagine per indicare che qualcosa potrebbe essere ancora in fase di caricamento.

Su questa pagina

Di

I segnaposto possono essere utilizzati per migliorare l'esperienza dell'applicazione. Sono costruiti solo con HTML e CSS, il che significa che non è necessario alcun JavaScript per crearli. Avrai, tuttavia, bisogno di alcuni JavaScript personalizzati per attivare la loro visibilità. Il loro aspetto, colore e dimensioni possono essere facilmente personalizzati con le nostre classi di utilità.

Esempio

Nell'esempio seguente, prendiamo un tipico componente di una carta e lo ricreiamo con i segnaposto applicati per creare una "scheda di caricamento". Dimensioni e proporzioni sono le stesse tra i due.

Titolo della carta

Un breve testo di esempio per costruire sul titolo della carta e costituire la maggior parte del contenuto della carta.

Andare da qualche parte

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

Come funziona

Crea segnaposto con la .placeholderclasse e una classe di colonna della griglia (ad es. .col-6) per impostare il width. Possono sostituire il testo all'interno di un elemento o essere aggiunti come classe modificatore a un componente esistente.

Applichiamo uno stile aggiuntivo a .btns via ::beforeper garantire il heightrispetto. È possibile estendere questo modello per altre situazioni in base alle esigenze o aggiungere un  elemento all'interno dell'elemento per riflettere l'altezza quando al suo posto viene visualizzato il testo effettivo.

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>

L'uso di aria-hidden="true"only indica che l'elemento deve essere nascosto agli screen reader. Il comportamento di caricamento del segnaposto dipende da come gli autori utilizzeranno effettivamente gli stili segnaposto, da come intendono aggiornare le cose, ecc. Potrebbe essere necessario del codice JavaScript per scambiare lo stato del segnaposto e informare gli utenti AT dell'aggiornamento.

Larghezza

È possibile modificare le widthclassi delle colonne della griglia, le utilità di larghezza o gli stili in linea.

html

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

Colore

Per impostazione predefinita, placeholderutilizza currentColor. Questo può essere sovrascritto con un colore personalizzato o una classe di utilità.

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>

Dimensionamento

Le dimensioni di .placeholders si basano sullo stile tipografico dell'elemento padre. Personalizzali con i modificatori di ridimensionamento: .placeholder-lg, .placeholder-sm, o .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>

Animazione

Anima i segnaposto con .placeholder-glowo .placeholder-waveper trasmettere meglio la percezione di qualcosa che viene caricato attivamente .

html

<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

Sass

Variabili

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