Vitral 0.2
Mensagens

Skeleton

O contorno de um conteúdo que ainda está carregando, em qualquer formato, de uma linha de texto a um card inteiro.

Testado com WAI-ARIA

Importação

main.ts
import { Skeleton } from '@vitral/vue';

Formas

<script setup lang="ts">import { Skeleton } from '@vitral/vue';</script> <template>    <Skeleton shape="circle" width="3rem" />    <Skeleton width="3rem" height="3rem" />    <Skeleton width="10rem" height="3rem" border-radius="1rem" />    <Skeleton width="10rem" :animated="false" /></template>

Um card carregando

<script setup lang="ts">import { Skeleton } from '@vitral/vue';</script> <template>    <div aria-busy="true" style="display: grid; gap: 0.75rem; width: 100%; max-width: 24rem">        <div style="display: flex; gap: 0.75rem; align-items: center">            <Skeleton shape="circle" width="3rem" />            <div style="display: grid; gap: 0.5rem; flex: 1">                <Skeleton width="60%" />                <Skeleton width="40%" />            </div>        </div>        <Skeleton height="8rem" />        <div style="display: flex; justify-content: space-between">            <Skeleton width="5rem" height="2rem" />            <Skeleton width="5rem" height="2rem" />        </div>    </div></template>

API

Lido de packages/vue/src/components/Skeleton/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
shape'rectangle' | 'circle'`'rectangle'` (o padrão) ou `'circle'`, que também iguala largura e altura.
widthstringQualquer comprimento CSS. O padrão é a largura inteira do espaço em que está.
heightstringQualquer comprimento CSS. O padrão é uma linha.
borderRadiusstring—
animatedbooleanO brilho que atravessa a caixa. Ligado por padrão, e desligado sob `prefers-reduced-motion`.

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.