Uma especificação para componentes funcionais da interface do usuário
https://standard-compponents.com
As bibliotecas de componentes da interface do usuário vêm em todas as formas e tamanhos. Essa especificação pretende ser uma maneira de padronizar as APIs de nomeação de convenções e adereços para criar um ecossistema de componentes intercambiáveis da UI e incentivar a maior reutilização de código.
Para criar bibliotecas de componentes intercambiáveis da UI, a seguinte convenção de nomenclatura deve ser usada. Esta lista é intencionalmente limitada e deve ser um ponto de partida para demonstração. Mais componentes provavelmente serão adicionados ao longo do tempo.
O componente da caixa é um componente de layout primitivo do modelo de caixa que lida com margem, preenchimento, largura e outros estilos de layout.
O componente Flex é uma extensão do componente da caixa com propriedades específicas do Flexbox.
O componente de texto é um componente tipográfico primitivo que lida com o tamanho da fonte, peso, altura de linha, alinhamento e outros estilos tipográficos.
O componente de cabeçalho é uma extensão do componente de texto destinado a títulos.
O componente da imagem é um componente de conteúdo que exibe imagens.
O BackgroundImage é uma extensão do componente da caixa com adereços para exibir imagens em segundo plano.
O componente do botão é um componente interativo com estilos que parecem um botão.
O componente de link é um componente interativo destinado à navegação.
Os adereços de estilo são uma abstração de nível superior no topo do CSS destinado à flexibilidade e para ajudar a lidar com as preocupações de estilo por instância. Os adereços de estilo são amplamente baseados nas propriedades do CSS, com adereços de abreviação para margem e preenchimento.
Alguns componentes, como botões, usam variantes de estilo para renderizar versões diferentes, como estilos de botões primary e secondary . As variantes devem ser tratadas com um suporte variant , com adereços booleanos abreviados para variantes primary e secondary .
Veja adereços para mais.
Temas são objetos que definem os valores usados por adereços de estilo. Os temas garantem margem consistente, preenchimento, cores, tamanhos de fonte e outras constantes da interface do usuário.
Veja temas para mais.
Ao aderir a uma estrutura estrita do tipo componente, os componentes em um sistema podem se preocupar com um propósito singular e permitir uma maior intercambiabilidade entre as bibliotecas.
Componentes de layout Controle a largura, altura e espaçamento. Eles não tentam controlar a tipografia ou outras considerações.
Os componentes tipográficos estão preocupados com famílias de fontes, tamanhos, pesos, liderança, rastreamento e outras propriedades. Os componentes tipográficos não estão preocupados com o layout.
Os componentes de conteúdo exibem coisas como imagens, vídeos e diagramas sem afetar o layout, a tipografia ou outras preocupações de estilo.
Elementos interativos, como links, botões e elementos de forma, requerem entrada do usuário e geralmente não lidam com as preocupações de layout ou tipográficas.
Os componentes de estilo lidam com outros estilos de interface do usuário, como bordas, raios, sombras e gradientes sem afetar o layout ou a tipografia.
Os componentes da posição removem seus filhos do fluxo normal de documentos e devem ser usados com moderação.
Feito por Compositor | Github | MIT Licença