"HowTo: Components" é uma coleção de componentes da Web que implementam padrões comuns de interface. O objetivo dessas implementações é servir como um recurso educacional. Você pode ler a implementação densamente comentada de diferentes componentes e aprender com eles. Eles NÃO são uma biblioteca de IU e NÃO devem ser usados na produção.
Componentes
<howto-checkbox>: representa uma opção booleana em um formulário. O tipo mais comum de caixa de seleção é o duplo, que permite ao usuário alternar entre duas opções: marcada e desmarcada.<howto-tabs>: limita o conteúdo visível ao separá-lo em vários painéis.<howto-tooltip>: um pop-up que mostra informações relacionadas a um elemento quando ele recebe o foco do teclado ou o mouse passa sobre ele.
Metas
Nosso objetivo é demonstrar as práticas recomendadas para escrever componentes robustos que sejam acessíveis, eficientes, fáceis de manter e de estilizar. Cada componente é completamente independente para que possa servir como uma implementação de referência.
Acessibilidade
Os componentes seguem de perto as Práticas de criação de WAI ARIA, que é um guia para explicar e mostrar o ARIA, o padrão de aplicativos de Internet avançados acessíveis. Se você não conhece a ARIA, confira nossa introdução no WebFundamentals. Cada componente tem um link para a seção relevante das Práticas de Criação. Embora não seja estritamente necessário, recomendamos ler a seção de práticas de autoria antes de começar a programar.
Desempenho
No desenvolvimento para Web, o termo "desempenho" pode ser aplicado a uma infinidade de
coisas. No contexto do <howto>, o desempenho se refere principalmente a animações
executadas de forma consistente a 60 fps, mesmo em dispositivos móveis.
Flexibilidade visual
Na medida do possível, os componentes não são estilizados, exceto para layout ou para indicar um estado selecionado ou ativo. Isso mantém a implementação visualmente flexível e focada. Ao não gastar tempo com decoração, limitamos o código apenas ao que é absolutamente necessário para que o componente funcione. Se algum estilo for necessário para que o componente funcione, ele será marcado com um comentário explicando o motivo.
Código de fácil manutenção
Como o HowTo: Components é uma implementação de referência, dedicamos mais tempo para escrever um código legível e facilmente compreensível, com muitos comentários.
Não são metas
Ser uma biblioteca / framework / kit de ferramentas
Os componentes <howto> não são publicados no npm, no bower ou em qualquer outra plataforma,
porque não são destinados ao uso em produção. Para que o código seja conciso e legível, usamos APIs JavaScript modernas e oferecemos suporte a navegadores modernos que implementam os padrões de componentes da Web. Você
poderá adaptar o código para atender às suas necessidades depois de ler essas
implementações.
Ser compatível com versões anteriores
Não use o código diretamente. É possível, e muito provável, que vamos mudar drasticamente a implementação e a API de qualquer elemento se uma implementação melhor for descoberta. Este é um recurso dinâmico em que podemos compartilhar, explorar e discutir as práticas recomendadas para criar interfaces da Web.
Ser completa
Não implementamos (e provavelmente não vamos implementar) *todos *os componentes que podem ser
encontrados nas Práticas de Criação do WAI ARIA. No entanto, reutilizar os princípios usados
em outros componentes do <howto> deve permitir que os leitores implementem qualquer componente
que esteja faltando.