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*
property | description | required | default value | type |
---|---|---|---|---|
round | Render the rounded variant | false | false | boolean |
*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
variações
Duas variações de skeleton podem ser utilizadas. Não é necessário fazer uma representação fiel à interface.
variação | utilização |
---|---|
rectangle | Para componentes em formato retangular. |
round | Para 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
United | Olist Design System |
---|---|
height | icon |
width | size |
duration | ❌ |
❌ | round |