Espaces réservés
Utilisez des espaces réservés de chargement pour vos composants ou pages pour indiquer que quelque chose est peut-être encore en cours de chargement.
À propos de
Les espaces réservés peuvent être utilisés pour améliorer l'expérience de votre application. Ils sont construits uniquement avec HTML et CSS, ce qui signifie que vous n'avez pas besoin de JavaScript pour les créer. Vous aurez cependant besoin de JavaScript personnalisé pour basculer leur visibilité. Leur apparence, leur couleur et leur taille peuvent être facilement personnalisées avec nos classes utilitaires.
Exemple
Dans l'exemple ci-dessous, nous prenons un composant de carte typique et le recréons avec des espaces réservés appliqués pour créer une "carte de chargement". La taille et les proportions sont les mêmes entre les deux.
Titre de la carte
Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.
Aller quelque part<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>
Comment ça fonctionne
Créez des espaces réservés avec la .placeholder
classe et une classe de colonne de grille (par exemple, .col-6
) pour définir le width
. Ils peuvent remplacer le texte à l'intérieur d'un élément ou être ajoutés en tant que classe de modificateur à un composant existant.
Nous appliquons un style supplémentaire à .btn
s via ::before
pour nous assurer que le height
est respecté. Vous pouvez étendre ce modèle pour d'autres situations si nécessaire, ou ajouter un
dans l'élément pour refléter la hauteur lorsque le texte réel est rendu à sa place.
<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"
indique uniquement que l'élément doit être masqué pour les lecteurs d'écran. Le
comportement de chargement de l'espace réservé dépend de la manière dont les auteurs utiliseront réellement les styles d'espace réservé, de la façon dont ils prévoient de mettre à jour les éléments, etc. Du code JavaScript peut être nécessaire pour
échanger l'état de l'espace réservé et informer les utilisateurs AT de la mise à jour.
Largeur
Vous pouvez modifier les width
classes de colonnes de grille traversantes, les utilitaires de largeur ou les styles en ligne.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Couleur
Par défaut, le placeholder
utilise currentColor
. Cela peut être remplacé par une couleur personnalisée ou une classe utilitaire.
<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>
Dimensionnement
La taille de .placeholder
s est basée sur le style typographique de l'élément parent. Personnalisez-les avec des modificateurs de dimensionnement : .placeholder-lg
, .placeholder-sm
ou .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>
Animation
Animez les espaces réservés avec .placeholder-glow
ou .placeholder-wave
pour mieux transmettre la perception que quelque chose est activement chargé.
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Toupet
variables
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;