Componentes do HowTo
"HowTo: Components" é uma coleção de componentes da Web que implementam padrões de interface comuns. O objetivo dessas implementações é ser um recurso educacional. Você pode ler a implementação com comentários densos de diferentes componentes e aprender com eles. Elas NÃO são uma biblioteca de interface e NÃO devem ser usadas na produção.
Componentes
<howto-checkbox>: representa uma opção booleana em um formulário. O tipo mais comum de caixa de seleção é um tipo duplo que permite ao usuário alternar entre duas opções: marcada e desmarcada.<howto-tabs>: limita o conteúdo visível separando-o 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 quando o mouse passa por cima dele.
Metas
Nosso objetivo é demonstrar as práticas recomendadas para escrever componentes robustos que sejam acessíveis, eficientes, de fácil manutenção e fáceis de estilizar. Cada componente é completamente independente para servir como uma implementação de referência.
Acessibilidade
Os componentes seguem de perto as Práticas de criação de ARIA da WAI, que é um guia para explicar e mostrar ARIA, o padrão Accessible Rich Internet Application. Se você não conhece a ARIA, confira nossa introdução sobre os 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 a leitura da seção Práticas de criação antes de mergulhar no código.
Desempenho
No desenvolvimento da Web, o termo "performance" pode ser aplicado a muitas
coisas. No contexto de <howto>, a performance 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 têm estilo, exceto para layout ou para indicar um estado selecionado ou ativo. Isso é para manter a implementação visualmente flexível e focada. Ao não gastar tempo com a decoração, limitamos o código apenas ao que é absolutamente necessário para fazer o componente funcionar. Se algum estilo for necessário para que o componente funcione, ele será marcado com um comentário explicando o motivo.
Código que pode ser mantido
Como o HowTo: Components é uma implementação de referência, passamos mais tempo escrevendo código legível e fácil de entender, com muitos comentários.
Metas não alcançadas
Ser uma biblioteca, um framework ou um 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 a serem usados na produção. Para um código conciso e
legível, estamos usando APIs JavaScript modernas e oferecendo suporte a navegadores
modernos que implementam os padrões de componentes da Web. Você
poderá adaptar o código às suas necessidades depois de ler essas
implementações.
Ser compatível com versões anteriores
Não confie no código diretamente. Talvez, e muito provavelmente 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
No momento, não implementamos (e provavelmente não vamos implementar) *todos *os componentes que podem ser
encontrados nas Práticas de Criação de ARIA da WAI. No entanto, reutilizar os princípios usados
em outros componentes <howto> permite que os leitores implementem os componentes
que estão faltando.