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.
Componentes
<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.