kimia UI

Composants d'interface utilisateur pour réagir construit avec le vent arrière CSS 3

Pourquoi cette approche?

Tailwind CSS est un framework CSS d'abord utilitaire pour la création rapide d'interfaces utilisateur personnalisées. IL vous permet d'écrire votre style sans quitter votre HTML.

Le plus grand inconvénient du vent arrière CSS est le risque d'avoir des classes trop longues qui rendront notre code suffisamment lisible.

Comme React est basé sur les composants, nous pouvons extraire la logique des composants avec ses classes et les réutiliser ailleurs, ce qui entraînera un code plus lisible avec plus de composants et moins de classes.

C'est pourquoi j'ai créé cette collection de composants d'interface utilisateur entièrement personnalisables. Copiez et collez un composant que vous souhaitez utiliser

Tous les composants sont dans le répertoire des packages .

Chaque composant contient 2 sous-répertoires

• Exemples : Contient des exemples pour chaque variante du composant dans TypeScript

• Extraits : contient des exemples pour chaque variante du composant en réaction ordinaire

? Ajouter un nouveau composant

Pour ajouter un nouveau composant:

Créez votre nouveau répertoire dans SRC / Packages / {YourComponentName} dans votre dossier, vous allez créer 2 sous-dossiers et un fichier

• Exemples : Will contient des exemples pour votre composant dans TypeScript **
• Extraits : Will contient des exemples en réaction ordinaire et sera utilisé comme extrait de code pour copier
• {le nom de votre composant} .tsx contient la logique de vos composants

Créez votre nouveau fichier (route) dans SRC / Pages / Components / {votre nom de composant} . Ensuite, vous importerez tous les exemples et extraits de votre composant

Support de navigateur

Ces composants sont compatibles avec tous les navigateurs

Chrome	Incendier	Bord	Safari	Opéra

Contribution

Si vous souhaitez contribuer au projet, corriger les bogues, améliorer l'accessibilité ou ouvrir un problème, veuillez suivre notre guide de contribution

Tout d'abord, exécutez le serveur de développement:

npm run dev
# or
yarn dev

Ouvrez http: // localhost: 3000 avec votre navigateur pour voir le résultat.