Una especificación para los componentes de la interfaz de usuario funcionales
https://standard-components.com
Las bibliotecas de componentes de la interfaz de usuario vienen en todas las formas y tamaños. Esta especificación se pretende como una forma de estandarizar las convenciones de nombres y las API de accesorios para crear un ecosistema de componentes de la UI intercambiables y fomentar una mayor reutilización del código.
Para crear bibliotecas de componentes de UI intercambiables, se debe utilizar la siguiente convención de nombres. Esta lista es intencionalmente limitada y está destinada a ser un punto de partida para la demostración. Es probable que se agregarán más componentes con el tiempo.
El componente de la caja es un componente de diseño de modelo de caja primitiva que maneja el margen, el acolchado, el ancho y otros estilos de diseño.
El componente Flex es una extensión del componente de la caja con propiedades específicas de FlexBox.
El componente de texto es un componente tipográfico primitivo que maneja el tamaño de la fuente, el peso, la alineación de línea, la alineación y otros estilos tipográficos.
El componente de encabezado es una extensión del componente de texto destinado a encabezados.
El componente de la imagen es un componente de contenido que muestra imágenes.
La imagen de fondo es una extensión del componente de caja con accesorios para mostrar imágenes de fondo.
El componente del botón es un componente interactivo con estilos que parecen un botón.
El componente del enlace es un componente interactivo destinado a la navegación.
Los accesorios de estilo son una abstracción de nivel superior en la parte superior del CSS destinado a la flexibilidad y para ayudar a abordar las preocupaciones de diseño de la instancia. Los accesorios de estilo se basan en gran medida en las propiedades de CSS, con accesorios en taquigrafía para el margen y el relleno.
Algunos componentes, como los botones, usan variantes de estilo para representar diferentes versiones, como los estilos de botones primary y secondary . Las variantes deben manejarse con un accesorio variant , con accesorios booleanos en taquigrafía para variantes primary y secondary .
Ver accesorios para más.
Los temas son objetos que definen los valores utilizados por los accesorios de estilo. Los temas aseguran un margen, relleno, colores, tamaños de fuente y otras constantes de interfaz de usuario.
Ver temas para más.
Al adherirse a una estructura de tipo de componente estricto, los componentes en un sistema pueden preocuparse por un propósito singular y permitir una mayor intercambiabilidad en las bibliotecas.
Componentes de diseño Control de ancho, altura y espacio. No intentan controlar la tipografía u otras consideraciones.
Los componentes tipográficos se refieren a familias de fuentes, tamaños, pesos, liderazgo, seguimiento y otras propiedades. Los componentes tipográficos no se refieren al diseño.
Los componentes de contenido muestran cosas como imágenes, videos y diagramas sin afectar el diseño, la tipografía u otras preocupaciones de estilo.
Los elementos interactivos, como enlaces, botones y elementos de formulario, requieren entrada del usuario y generalmente no manejan las preocupaciones de diseño o tipográficos.
Los componentes de estilo manejan otros estilos de interfaz de usuario, como bordes, radios, sombras y gradientes sin afectar el diseño o la tipografía.
Los componentes de posición eliminan a sus hijos del flujo de documento normal y deben usarse con moderación.
Hecho por compositor | GitHub | Licencia de MIT