Componentes de instruções – visão geral

Componentes de instruções

"HowTo: componentes" são uma coleção de componentes da Web que implementam componentes desenhos. O objetivo dessas implementações é ser um recurso educacional. Você pode ler a implementação bastante comentada de diferentes componentes e, com sorte, aprender com eles. Observe que elas NÃO são explicitamente uma biblioteca de interface e NÃO deve ser usado na produção.

  • <howto-checkbox>: representa uma opção booleana em um formulário. O tipo mais comum de a caixa de seleção é do tipo duplo que permite ao usuário alternar entre duas opções: marcadas e desmarcadas.
  • <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.

Metas

Nosso objetivo é demonstrar as práticas recomendadas para escrever componentes robustos que sejam acessíveis, eficientes, fáceis de manter e de estilo. Cada componente é completamente independente para que possa servir como uma implementação de referência.

Acessibilidade

Os componentes seguem de perto a norma WAI ARIA Authoring práticas, que é um guia para explicar e mostrar a ARIA, o Accessible Rich Internet Application padrão. Se você não conhece ARIA, confira a introdução WebFundamentals. Cada componente tem um link para a seção relevante das Práticas de criação. não é estritamente necessário, recomendamos a leitura da seçã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. sendo executados consistentemente 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 serve para manter a implementação visualmente flexível e manter o foco. Ao não perder tempo com decoração, limitamos o código apenas é absolutamente necessário para que o componente funcione. Se algum estilo for necessário para que o componente funcione, o estilo será marcado com um comentário explicando o motivo.

Código sustentável

As instruções: componentes é uma referência de implementação, passamos mais tempo escrevendo código compreensível que seja densamente comentado.

Sem 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 eles não devem ser usados na produção. Para ser conciso, legível, usamos APIs JavaScript modernas e oferecemos suporte a APIs navegadores que implementam os padrões do Web Components. Você poderá adaptar o código para atender às suas próprias necessidades depois de ler essas e implementações.

Ser compatível com versões anteriores

O código não deve ser confiável diretamente. Podemos, e muito provavelmente vamos, alterar drasticamente a implementação e a API de qualquer elemento se uma implementação é descoberta. Esse é um recurso vivo que podemos compartilhar, conhecer e discutir as práticas recomendadas para criar IUs da Web.

Ser completo

No momento, não (e provavelmente não implementaremos) *todos *os componentes que podem ser encontrado nas Práticas de criação da WAI ARIA. No entanto, a reutilização dos princípios em outros componentes <howto> precisa permitir que os leitores implementem qualquer componente que estão faltando.