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 |