Componentes de instructivos
"Instructivo: Componentes" es una colección de componentes web que implementan patrones comunes de la IU. El propósito de estas implementaciones es ser un recurso educativo. Puedes leer la implementación con muchos comentarios de los diferentes componentes y, con suerte, aprender de ellos. Ten en cuenta que, de forma explícita, 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 un tipo dual que permite al usuario alternar entre dos opciones: marcada y no marcada.<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 cuando el mouse se coloca 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 con diseño. Cada componente es completamente independiente, por lo que puede servir como implementación de referencia.
Accesibilidad
Los componentes siguen de cerca las Prácticas de Autoring de ARIA de la WAI, que es una guía para explicar y mostrar ARIA, el estándar de Aplicaciones de Internet enriquecidas accesibles. Si no estás familiarizado con ARIA, consulta nuestra introducción en WebFundamentals. Cada componente incluye un vínculo a la sección relevante de las Prácticas de autoría. Si bien no es estrictamente necesario, te recomendamos que leas la sección de Prácticas de Autorización antes de comenzar con el código.
Rendimiento
En el desarrollo web, el término “rendimiento” se puede aplicar a una gran variedad de aspectos. En el contexto de <howto>, el rendimiento se refiere principalmente a las animaciones que se ejecutan de forma coherente a 60 fps, incluso en dispositivos móviles.
Flexibilidad visual
En la medida de lo posible, los componentes no tienen diseño, excepto para el diseño o para indicar un estado seleccionado o activo. Esto permite que la implementación sea 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 funcione el componente. Si se requiere algún estilo para que el componente funcione, este se marcará con un comentario en el que se explicará el motivo.
Código mantenible
Como HowTo: Components es una implementación de referencia, dedicamos tiempo adicional a escribir un código legible y fácil de entender con muchos comentarios.
No son objetivos
Ser una biblioteca, un framework o un kit de herramientas
Los componentes <howto> no se publican en npm, bower ni en ninguna otra plataforma porque no están diseñados para usarse en producción. Para obtener un código breve y legible, usamos APIs de JavaScript modernas y admitimos navegadores modernos que implementan los estándares de componentes web. Podrás adaptar el código para que se adapte a tus necesidades después de leer estas implementaciones.
Ser retrocompatible
No se debe depender directamente del código. Es posible, y es muy probable que lo hagamos, cambiar drásticamente la implementación y la API de cualquier elemento si se descubre una implementación mejor. Este es un recurso dinámico en el que podemos compartir, explorar y analizar las prácticas recomendadas para crear IUs web.
Estar completa
Actualmente, no implementamos (y probablemente no lo haremos) *todos *los componentes que se pueden encontrar en las prácticas de autorías de ARIA de WAI. Sin embargo, reutilizar los principios que se usan en otros componentes de <howto> debería permitir a los lectores implementar los componentes que faltan.