componentes

skeleton (beta)

Marcador de posição do conteúdo que ainda não foi carregado.

demo interativa

Uma versão de interativa do componente desenvolvido.

propriedades*

propertydescriptionrequireddefault valuetype

round

Render the rounded variant

falsefalseboolean

*valores gerados automaticamente.

propriedades para estilização (styled props)

Recomendamos que o componente siga as propriedades padrões, mencionadas na sessão acima. Porém, ele também possui as seguintes propriedades do @olist/styled-system para atender cenários não mapeados:

uso

Skeleton é utilizado para indicar que um conteúdo está sendo carregado, diminuindo a sensação de espera por criar uma visualização em baixa fidelidade da interface.

exemplo de carregamento com skeleton

exemplo de carregamento com skeleton

variações

Duas variações de skeleton podem ser utilizadas. Não é necessário fazer uma representação fiel à interface.

variaçãoutilização
rectanglePara componentes em formato retangular.
roundPara componentes com formato arredondado.

grupos e alinhamento

O skeleton deve ser usado seguindo os agrupamento e alinhamento dos componentes que ele representa.

guia de design

  • Tem guia de uso.
  • Tem guia de conteúdo.
  • Use os design tokens.
  • Tem símbolo no Figma.
  • Possui motion.
  • Possui versão web.
  • Possui versão responsiva.
  • Possui versão mobile.
  • É acessível via leitor de tela.
  • Texto possui contraste acessível (WCAG 2.0 - Nível AA).

Migração do United para Olist Design System

Propriedades

UnitedOlist Design System
heighticon
widthsize
duration
round