Skeleton
O componente Skeleton é usado para criar espaços reservados que representam conteúdo que está carregando ou sendo processado.
Quando usar:
- Use o componente Skeleton quando o carregamento de conteúdo for perceptível para o usuário e você deseja fornecer feedback visual durante esse processo.
- É especialmente útil em situações onde o tempo de carregamento do conteúdo é variável ou pode levar algum tempo para ser concluído.
Quando não usar:
- Evite usar o componente Skeleton quando o conteúdo é carregado instantaneamente, pois pode causar distração ou poluição visual desnecessária.
- Não use quando o feedback visual do carregamento não for relevante para a experiência do usuário ou quando o carregamento é rápido e não perceptível.
Observações
- Personalize as propriedades do skeleton conforme necessário para corresponder ao layout e estilo do seu aplicativo.
- O componente suporta formas de 'circle' e 'square' e pode ser dimensionado dinamicamente para se adaptar ao conteúdo ou à largura disponível.
Uso
js
<CdsSkeleton
:width="100"
/>Preview
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
width | string | '20' | -- | Largura do skeleton |
height | string | '16' | -- | Altura do skeleton |
fluid | boolean | false | -- | Ajusta de acordo com o componente pai. Não se aplica ao shape 'circle' |
shape | string | 'square' | circle square | Indica o shape do elemento. São duas opções: circle, square |