claxed

Klassen mit dem gleichen Stil von Stilkomponenten
Demo anzeigen · Fehler melden · Anforderungsfunktion

Über das Projekt

Die Idee wird bei der Verwendung von Tailwind -CSS geboren, ein sehr hilfreicher Klassenrahmen, der uns alle CSS -Klassen für Größen, Farben und Abschnitte gibt. Es kann jedoch chaotisch sein, wenn Sie viele Klassen in der Komponente eingeben. Und ganz zu schweigen davon, wann Sie eine bedingte Klasse wollen, die auf einer Requisite basiert?

Mit klaxierten, stark von gestalteten Komponenten inspirierten Komponenten können wir unseren DOM mit Hilfe einiger Dienstprogramme wie der Interpolation in der Vorlagenzeichenfolge ein wenig sauberer halten.

Installation

npm install claxed

oder

yarn add claxed

Verwendung

Wenn Sie wissen, dass sie gestylt sind, ist diese Syntax Ihnen möglicherweise bereits bekannt. Was auch immer Sie in der Vorlagenzeichenfolge eingeben, wird im Attribut HTML class der Komponente gedruckt. Im folgenden Beispiel ist jede Zeile eine CSS -Klasse.

 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 

Roadmap

In den offenen Problemen finden Sie eine Liste der vorgeschlagenen Merkmale (und bekannten Probleme).

Beitragen

Beiträge machen die Open -Source -Community zu einem erstaunlichen Ort, an dem sie lernen, inspirieren und kreieren können. Alle Beiträge, die Sie leisten, werden sehr geschätzt .

1. Geben Sie das Projekt auf
2. Erstellen Sie Ihre Funktionszweig ( git checkout -b feature/AmazingFeature ).
3. Bestimmen Sie Ihre Änderungen ( git commit -m 'Add some AmazingFeature' )
4. Push in den Zweig ( git push origin feature/AmazingFeature )
5. Öffnen Sie eine Pull -Anfrage

FAQ

Ist die Reihenfolge, in der ich Klassen mit klaxiertem für ihre CSS -Spezifität relevant tippe?

Nr. Claxed ist nur dafür verantwortlich, CSS -Klassen zu kombinieren und das Ergebnis in das HTML -Class'' -Attribut der Komponente zu setzen. Wenn Sie ein Spezifitätsproblem haben, sollten Sie sich ansehen, wie Klassen in der CSS -Datei definiert sind

Lizenz

Unter der MIT -Lizenz verteilt. Weitere Informationen finden Sie LICENSE .

Kontakt

Tommaso Poletti - @Tomma5o

Projektlink: https://github.com/tomma5o/claxed