Steps
Os Steps permitem a navegação entre etapas através de cliques em itens ou podem servir como referência, informando onde a pessoa usuária está, para onde vai e quanto falta para chegar lá - neste último caso, sem a navegação por clique.
Existem dois tipos de Steps: Vertical ou Horizontal.
Vertical
São usados para quebrar um fluxo em etapas menores. São aplicados no corpo da página em que o fluxo estará disponível.
Por ter layout vertical, não existe limite de quantidade de etapas, mas deve ser levado em conta a experiência da pessoa usuária dentro do fluxo.
Horizontal
Assim como os verticais, os Steps horizontais também são usados para quebrar um fluxo em etapas menores.
A aplicação deve ser no topo da página, contextualizando logo no início da navegação.
Para ter um layout horizontal é necessário verificar se existem outros elementos ao lado e como será o comportamento em resoluções de telas diferentes.
Boas práticas
- Não deve ser usado para navegação convencional. Para isso, use o componente de Tabs
- Use rótulos claros para cada etapa de progresso; eles são cruciais para informar onde a pessoa usuária está
- Identifique o que as etapas podem exigir da pessoa usuária. Por exemplo: etapa de conteúdo, configuração, segurança, entre outros
- Use no máximo 2 palavras nos rótulos
Feedback
Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.