Marcadores de posición
Use marcadores de posición de carga para os seus compoñentes ou páxinas para indicar que aínda se está cargando algo.
Sobre
Os marcadores de posición pódense usar para mellorar a experiencia da túa aplicación. Están construídos só con HTML e CSS, o que significa que non necesitas JavaScript para crealos. Non obstante, necesitarás JavaScript personalizado para cambiar a súa visibilidade. O seu aspecto, cor e tamaño pódense personalizar facilmente coas nosas clases de utilidade.
Exemplo
No seguinte exemplo, tomamos un compoñente de tarxeta típico e recreámolo con marcadores de posición aplicados para crear unha "tarxeta de carga". O tamaño e as proporcións son os mesmos entre ambos.
Título da tarxeta
Algún texto de exemplo rápido para construír o título da tarxeta e facer a maior parte do contido da tarxeta.
Vai a algún lado<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>
Cómo funciona
Cree marcadores de posición coa .placeholder
clase e unha clase de columna de grade (por exemplo, .col-6
) para establecer o width
. Poden substituír o texto dentro dun elemento ou engadirse como clase modificadora a un compoñente existente.
Aplicamos un estilo adicional a .btn
s via ::before
para garantir height
que se respecte. Podes estender este patrón a outras situacións segundo sexa necesario ou engadir un
dentro do elemento para reflectir a altura cando o texto real se representa no seu lugar.
<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"
só indica que o elemento debe ocultarse aos lectores de pantalla. O
comportamento de carga do marcador de posición depende de como os autores usen realmente os estilos de marcador de posición, de como planean actualizar cousas, etc. Pode ser necesario algún código JavaScript para
intercambiar o estado do marcador de posición e informar aos usuarios de AT sobre a actualización.
Anchura
Pode cambiar as width
clases de columnas de cuadrícula, as utilidades de ancho ou os estilos en liña.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
Cor
Por defecto, placeholder
usa currentColor
. Isto pódese substituír cunha cor personalizada ou cunha clase de utilidade.
<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>
Talla
O tamaño de .placeholder
s baséase no estilo tipográfico do elemento principal. Personalízaos con modificadores de tamaño: .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>
Animación
Anima os marcadores de posición con .placeholder-glow
ou .placeholder-wave
para transmitir mellor a percepción de algo que se está cargando activamente .
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
Sass
Variables
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;