claxed

Cours avec le même style de composants stylisés
Afficher la démo · Rapport Bogue · Demande de la demande

À propos du projet

L'idée est née tout en utilisant CSS Tailwind, qui est un camers de classes très utile qui nous donne toutes les classes CSS pour les tailles, les couleurs, les espacements. Cependant, cela peut être désordonné si vous avez beaucoup de classes à taper à l'intérieur du composant. Et sans parler du moment où vous voulez une classe conditionnelle basée sur un accessoire? ‍️

Avec CLAXED, fortement inspiré par les composants stylisés, nous pouvons garder notre Dom un peu plus propre à l'aide de certains utilitaires comme l'interpolation des accessoires à l'intérieur de la chaîne de modèle.

Installation

npm install claxed

ou

yarn add claxed

Usage

Si vous connaissez les composants stylisés, cette syntaxe pourrait vous être déjà familière. Tout ce que vous tapez dans la chaîne de modèle sera imprimé dans l'attribut class HTML du composant. Dans l'exemple suivant, chaque ligne est une classe CSS.

 const Button = claxed . button `
  px-3
  py-2
` ;

const ButtonRed = claxed ( Button ) `
  ${ ( { border } ) => border && 'border' }
  text-red-500
` ;

const App = ( ) => (
  < div >
    < Button > Click me </ Button >
    < ButtonRed border > Click me </ ButtonRed >
  </ div >
) ;

// Note: All the falsy values are stripped from the output 

Feuille de route

Voir les problèmes ouverts pour une liste des fonctionnalités proposées (et des problèmes connus).

Contributif

Les contributions font de la communauté open source un formulaire de lieu si étonnant où apprendre, être inspiré et créer. Toutes les contributions que vous faites sont grandement appréciées .

1. Fourk le projet
2. Créez votre branche de fonctionnalité ( git checkout -b feature/AmazingFeature )
3. Commissez vos modifications ( git commit -m 'Add some AmazingFeature' )
4. Push to the Branch ( git push origin feature/AmazingFeature )
5. Ouvrir une demande de traction

FAQ

L'ordre dans lequel je tape des classes avec CLAXED pertinentes pour leur spécificité CSS?

Non. CLAXED n'est responsable que de combiner les classes CSS et de mettre le résultat dans l'attribut HTML `Classe» du composant. Si vous avez un problème de spécificité, vous devez voir comment les classes sont définies dans le fichier CSS

Licence

Distribué sous la licence du MIT. Voir LICENSE pour plus d'informations.

Contact

Tommaso Poletti - @ Tomma5o

Lien du projet: https://github.com/tomma5o/claxed