kimia UI

Componentes da interface do usuário para o React construído com o Tailwind CSS 3

Por que essa abordagem?

O Tailwind CSS é uma estrutura CSS da Utility-primeiro para criar rapidamente interfaces de usuário personalizadas. IL permite que você escreva seu estilo sem deixar seu HTML.

A maior desvantagem do CSS do Tailwind é o risco de ter aulas muito longas que tornarão nosso código não legível o suficiente.

Como o React é baseado em componentes, podemos extrair a lógica de componentes com suas classes e reutilizá-las em outro lugar, o que resultará em código mais legível com mais componentes e menos classes.

É por isso que criei esta coleção de componentes da interface do usuário totalmente personalizável. Basta copiar e colar um componente que você deseja usar

Todos os componentes estão no diretório de pacotes .

Cada componente contém 2 subdiretos

• Exemplos : contém exemplos para cada variante do componente no TypeScript

• Flugets : contém exemplos para cada variante do componente em reagir simples

? Adicione um novo componente

Para adicionar um novo componente:

Crie seu novo diretório em SRC/Packages/{YourComponentName} dentro da sua pasta, você criará 2 subpastas e um arquivo

• Exemplos : Will contém exemplos para o seu componente no TypeScript **
• Flugets : Will contém exemplos de reação simples e será usada como trenó de código para copiar
• {seu nome de componente} .TSX contém a lógica de seus componentes

Crie seu novo arquivo (rota) em src/páginas/componentes/{seu nome de componente} . Então você importará todos os exemplos e trechos para o seu componente

Suporte do navegador

Esses componentes são compatíveis com todos os navegadores

Cromo	Firefox	Borda	Safári	Ópera

Contribuição

Se você deseja contribuir com o projeto, consertar bugs, melhorar a acessibilidade ou abrir um problema, siga nosso guia de contribuição

Primeiro, execute o servidor de desenvolvimento:

npm run dev
# or
yarn dev

Abra http: // localhost: 3000 com seu navegador para ver o resultado.