Copiar página como Markdown para IA
Receitas por tarefa
Uma receita combina o componente, o guia de integração e os cuidados de acessibilidade necessários para uma tarefa. Use os exemplos como ponto de partida e adapte o estado à aplicação consumidora.
Escolha uma tarefa
| Tarefa | Ponto de partida | Cuidados principais |
|---|---|---|
| Validar campos | Formulários e validadores | Mantenha label, mensagem de erro, estado inválido e associação por aria-describedby. |
| Navegar entre páginas | Navegação dos componentes | Use o roteador da aplicação sem substituir a navegação nativa por eventos proprietários. |
| Abrir uma confirmação | br-modal | Controle foco, título, fechamento por teclado e retorno do foco ao acionador. |
| Exibir dados tabulares | br-table e br-pagination | Mantenha cabeçalhos associados às células e anuncie a mudança de página. |
| Enviar arquivos | br-upload e dados remotos | Mostre progresso, erro, cancelamento e resultado do upload. |
| Consentimento de cookies | br-cookiebar | Não bloqueie o conteúdo principal; persista somente o consentimento necessário. |
| Buscar dados remotamente | Dados remotos e carregamento | Faça debounce, cancelamento, estado de carregamento e mensagem para resultados vazios na aplicação. |
Estrutura recomendada
- Defina o estado e a fonte de dados na aplicação consumidora.
- Renderize o componente com propriedades e slots semânticos.
- Escute os eventos públicos e atualize o estado fora do componente.
- Apresente carregamento, erro, vazio e sucesso de forma acessível.
- Teste teclado, foco, zoom, leitor de tela e a resposta em telas pequenas.
O Web Component não deve conhecer autenticação, cache, roteamento ou a API de negócio. Essa separação permite que a mesma implementação seja usada em HTML, Angular, React, Vue e outras stacks compatíveis com a Web Platform.
Próximo passo
Depois de escolher uma receita, abra a página do componente para consultar a API completa, o Playground e os exemplos executáveis. Para comparar a forma de integração, consulte HTML e JavaScript ou os guias de Angular, React e Vue.
