Visão geral
Todos os 52 componentes do Feitio, por grupo. Cada um tem quando usar, quando não usar e o código.
Nesta página
Ações
Texto e estrutura da página
- HeadingO título de uma página ou de uma seção.
- TextO texto para ler, na medida.
- IconUm desenho do sprite, ao lado da palavra.
- BlockUm bloco de conteúdo sobre a página.
- VisuallyHiddenTexto só para o leitor de tela.
- SkipLinkPula direto para o conteúdo, pelo teclado.
- DividerA linha fina entre duas partes que se tocam.
- KbdUma tecla, escrita como no teclado.
Layout
Formulário
- FieldRótulo, dica, controle e erro de um campo.
- TextInputUma linha de texto.
- TimeInputHora e minuto, em 12 ou 24 horas.
- TextareaVárias linhas de texto.
- SelectUma escolha numa lista longa.
- CheckboxSim ou não, ou várias escolhas.
- RadiosUma escolha entre poucas, todas à vista.
- SwitchLiga e desliga um ajuste, valendo ao salvar.
- SegmentedControlUma escolha entre poucas opções vizinhas.
- FieldsetAgrupa campos que respondem uma pergunta.
- FilterFieldFiltra a lista de baixo enquanto a pessoa digita.
Retorno e erros
- ErrorMessageO erro de um campo, embaixo dele.
- ErrorSummaryTodos os erros do formulário, no topo.
- NoticeUm aviso com as palavras do que aconteceu.
- TagO estado de uma coisa, com ícone e palavra.
- EmptyStateQuando não há nada: o desenho e o próximo passo.
- StatusOverlayO retorno no próprio container: carregando, certo, erro.
Dados
Navegação
- HeaderO cabeçalho do site: marca, áreas e ferramentas.
- FooterO rodapé: a marca, os anos e os links.
- AppShellO layout de regiões de um produto.
- NavOs lugares do produto, com o atual marcado.
- BreadcrumbsO caminho do início até aqui.
- AnchorO índice da página, que acompanha a rolagem.
- DetailsUm trecho fechado que a pessoa abre se quiser.
- ScrollFadeAvisa que há mais conteúdo embaixo.
- BackToTopVolta ao começo depois de meia tela.
- SearchBusca no produto, com resultados enquanto digita.
Por cima da tela
Documentação
Modelos de página
Nenhum componente com esse nome.