Componentes de instruções – visão geral

Componentes de instruções

"HowTo: componentes" são 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 bastante comentada de diferentes componentes e aprender com eles. Eles NÃO são uma biblioteca de interface e NÃO podem 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 é duplo, permitindo que o usuário alterne 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 o mouse passa sobre ele.

Objetivos

Nosso objetivo é demonstrar as práticas recomendadas para criar componentes robustos que sejam acessíveis, com bom desempenho, de fácil manutenção e com fácil estilo. 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 ARIA da WAI, que é um guia para explicar e mostrar o ARIA, o padrão Accessible Rich Internet Application (link em inglês). Se você não estiver familiarizado com ARIA, confira nossa introdução sobre o WebFundamentals. Cada componente está vinculado à 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 se aprofundar no código.

Desempenho

No desenvolvimento da Web, o termo "desempenho" pode ser aplicado a uma infinidade de coisas. No contexto de <howto>, a performance se refere principalmente a animações executadas de forma consistente a 60 QPS, mesmo em dispositivos móveis.

Flexibilidade visual

Os componentes não são estilizados na medida do possível, exceto para o 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 na decoração, limitamos o código apenas ao necessário para que o componente funcione. Se for necessário um estilo para o funcionamento do componente, ele será marcado com um comentário explicando o porquê.

Código sustentável

Como a seção "HowTo: Components é uma implementação de referência", passamos mais tempo escrevendo código legível e facilmente compreensível e com comentários densos.

Não metas

Ser uma biblioteca / um framework / um kit de ferramentas

Os componentes <howto> não são publicados no npm, no bower ou em qualquer outra plataforma porque não podem ser usados na produção. Para criar um código conciso e legível, usamos APIs JavaScript modernas e oferecemos suporte a navegadores modernos que implementam os padrões da Web Components. Depois de ler essas implementações, você poderá adaptar o código às suas próprias necessidades.

Compatibilidade com versões anteriores

O código não deve ser usado diretamente. Se uma implementação melhor for descoberta, podemos e muito provavelmente vamos mudar drasticamente a implementação e a API de qualquer elemento. Esse é um recurso dinâmico em que podemos compartilhar, explorar e discutir as práticas recomendadas para criar IUs da Web.

Ser completos

No momento, não implementamos (e provavelmente não vamos) *todos *os componentes que podem ser encontrados nas práticas de criação ARIA da WAI. No entanto, reutilizar os princípios usados em outros componentes <howto> permite que os leitores implementem todos os componentes que estão faltando.