"HowTo: Components" es una colección de componentes web que implementan patrones de IU comunes. El propósito de estas implementaciones es ser un recurso educativo. Puedes leer la implementación con muchos comentarios de diferentes componentes y, con suerte, aprender de ellos. Ten en cuenta que NO son una biblioteca de IU y NO deben usarse en producción.
Componentes
<howto-checkbox>: Representa una opción booleana en un formulario. El tipo más común de casilla de verificación es el de tipo doble, que permite al usuario alternar entre dos opciones: marcada y desmarcada.<howto-tabs>: Limita el contenido visible separándolo en varios paneles.<howto-tooltip>: Es una ventana emergente que muestra información relacionada con un elemento cuando este recibe el enfoque del teclado o se coloca el mouse sobre él.
Objetivos
Nuestro objetivo es demostrar las prácticas recomendadas para escribir componentes sólidos que sean accesibles, eficientes, fáciles de mantener y de diseñar. Cada componente es completamente independiente, por lo que puede servir como una implementación de referencia.
Accesibilidad
Los componentes siguen de cerca las Prácticas de creación de WAI ARIA, que es una guía para explicar y mostrar ARIA, el estándar de aplicaciones de Internet enriquecidas accesibles. Si no conoces ARIA, consulta nuestra introducción en WebFundamentals. Cada componente se vincula a la sección pertinente de las Prácticas de creación. Si bien no es estrictamente necesario, te recomendamos que leas la sección de Prácticas de creación antes de profundizar en el código.
Rendimiento
En el desarrollo web, el término "rendimiento" se puede aplicar a una gran cantidad de
cosas. En el contexto de <howto>, el rendimiento se refiere principalmente a las animaciones que se ejecutan de forma constante a 60 fps, incluso en dispositivos móviles.
Flexibilidad visual
En la medida de lo posible, los componentes no tienen estilo, excepto para el diseño o para indicar un estado seleccionado o activo. Esto es para mantener la implementación visualmente flexible y enfocada. Si no dedicamos tiempo a la decoración, limitamos el código solo a lo que es absolutamente necesario para que el componente funcione. Si se requiere algún estilo para que el componente funcione, se marcará con un comentario que explique el motivo.
Código fácil de mantener
Como HowTo: Components es una implementación de referencia, dedicamos tiempo adicional a escribir código legible y fácil de comprender que está densamente comentado.
No objetivos
Ser una biblioteca, un framework o un kit de herramientas
Los componentes de <howto> no se publican en npm, bower ni en ninguna otra plataforma
porque no están diseñados para usarse en producción. Para que el código sea conciso y legible, usamos APIs de JavaScript modernas y admitimos navegadores actualizados que implementan los estándares de Web Components. Podrás
adaptar el código para que se ajuste a tus necesidades después de leer estas
implementaciones.
Ser retrocompatible
No se debe confiar directamente en el código. Es posible, y muy probable, que cambiemos drásticamente la implementación y la API de cualquier elemento si se descubre una mejor implementación. Este es un recurso dinámico en el que podemos compartir, explorar y analizar las prácticas recomendadas para compilar IU web.
Estar completo
No implementamos (y probablemente no lo haremos) *todos *los componentes que se pueden encontrar en las prácticas de creación de WAI ARIA. Sin embargo, reutilizar los principios que se usan en otros componentes de <howto> debería permitir que los lectores implementen los componentes que faltan.