rewindui

Einführung

Rewind-UI wurde speziell für die Verwendung mit React- und Tailwind-CSS erstellt und bietet eine Reihe von zugänglichen, hoch anpassbaren Komponenten, die leicht in jedes React-Projekt integriert werden können. REWIND-UI verfügt über eine Reihe von Standardstilen, die mit den CSS-Klassen von Tailwind CSS leicht angepasst werden können. Darüber hinaus kann jede Komponente unter Verwendung einer Reihe von Requisiten parametrisiert werden, mit denen die Standardstile der Komponente geändert werden können.

Installation

Rewind-UI ist als NPM-Paket erhältlich und kann mit dem folgenden Befehl installiert werden:

npm install @rewind-ui/core

Konfiguration

REWIND-UI ist so konzipiert, dass sie mit React- und Rückenwind-CSS verwendet werden. Um Rewind-UI zu verwenden, müssen Sie zuerst ReactJs und Rückenwind-CSS in Ihrem Projekt installieren. Darüber hinaus müssen Sie die folgenden NPM -Pakete installieren:

npm install tailwind-scrollbar @tailwindcss/forms @tailwindcss/typography

Nachdem Sie das CSS des Rückenwinds installiert haben, müssen Sie es so konfigurieren, dass es mit Rewind-UI funktioniert. Zu diesem Zweck müssen Sie zuerst eine Datei tailwind.config.js im Stammverzeichnis Ihres Projekts erstellen. Fügen Sie dann den folgenden Code zu dieser Konfigurationsdatei hinzu:

Es wird dringend empfohlen, nur die erforderlichen Stildateien hinzuzufügen, um eine aufgeblähte CSS -Datei zu vermeiden

 module . exports = {
  content : [
    './src/**/*.{html,jsx,tsx}' ,
    // you can either add all styles
    './node_modules/@rewind-ui/core/dist/theme/styles/*.js' ,
    // OR you can add only the styles you need
    './node_modules/@rewind-ui/core/dist/theme/styles/Button.styles.js' ,
    './node_modules/@rewind-ui/core/dist/theme/styles/Text.styles.js'
  ] ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    require ( 'tailwind-scrollbar' ) ( { nocompatible : true } ) ,
    require ( '@tailwindcss/forms' ) ( {
      strategy : 'class' // only generate classes
    } )
  ]
} ;

Verwendung

Um die Rewind-UI-Komponenten zu verwenden, fügen Sie einfach die folgende Importanweisung zu Ihrer React-Komponente hinzu:

 import { Button } from '@rewind-ui/core' ;

Dann können Sie die Komponente in Ihrem JSX -Code verwenden:

 < Button > Click Me </ Button >

Eigenschaften

Jede Komponente hat eine Reihe von Standardstilen, die mit den entsprechenden Props parametrisiert werden können. Beispielsweise hat die Button eine Standard -Blaufarbe und eine mittelgroße Größe. Diese Werte können geändert werden, indem die color und size an die Komponente festgelegt werden:

 < Button color = "black" size = "sm" > Click Me </ Button >

Darüber hinaus kann der Stil einer Komponente angepasst werden, indem die normale className -Requisit an sie weitergegeben wird. Diese Requisite kann verwendet werden, um die Standardstile der Komponente zu überschreiben. Beispielsweise ändert der folgende Code das Schriftgewicht der Schaltfläche in Semi-Bold:

REWIND-UI verwendet Tailwind-Merge, um die Standardklassen mit den Klassen, die Sie in der className Requisiten angeben, zusammenzuführen und mögliche Konflikte zu lösen.

  < Button color = "black" size = "sm" className = "font-semibold" > Click Me </ Button >

Varianten

Der Versuch, zu vermeiden, damit der Benutzer immer wieder mehrere Eigenschaften verwendet, haben wir eine variant erstellt. Eine Variante ist im Grunde genommen ein vordefinierter Satz von Eigenschaften, mit denen eine Komponente angepasst werden kann. Beispielsweise verfügt die Button über eine success , mit der eine Bootstrap-ähnliche Erfolgstaste erstellt werden kann:

  < Button variant = "success" > Click Me </ Button >

Weitere Informationen zu den Varianten jeder Komponente finden Sie auf ihrer entsprechenden Dokumentationsseite.

Anpassung

Alle Rückspulenkomponenten sind sehr anpassbar. Dies bedeutet, dass Sie die Standardstile einer Komponente problemlos ändern können, indem Sie die entsprechenden CSS -Klassen des Rückenwinds überschreiben. Weitere Informationen zur Stilanpassung auf der Theming -Seite.

Credits

Besonderer Dank geht an die folgenden Leute:

• Joe Bell - Für seine erstaunliche Open -Source -Bibliotheksklassenvarianzbehörde, die die Grundlage für das Theming -System von Rewind ist.
• JACK HERINGINTTON - Für die Inspiration, mich mit dem Aufbau von Rewind -UI zu beginnen.
• SHADCN - Für seine Open -Source -Projekte (Taxonomy & UI), die mir geholfen haben, diese Dokumentation aufzubauen.

Besonderer Dank geht an die folgenden Teams:

• React - zur Erstellung von Reaktionen.
• Rückenwindlabors - zum Erstellen von Rückenwind -CSS.
• Vercel - zum Erstellen von Next.js und ihren fantastischen Open -Source -Vorlagen.
• Floating-UI-zum Erstellen von schwimmender UI.
• Phosphor - zur Schaffung der Phosphorikonfamilie.