rewindui
@rewind-ui
Construit spécifiquement pour une utilisation avec React et Tailwind CSS, Rewind-UI propose une gamme de composants accessibles et hautement personnalisables qui peuvent être facilement intégrés dans n'importe quel projet React. Rewind-UI est livré avec un ensemble de styles par défaut qui peuvent être facilement personnalisés à l'aide de classes CSS de Tailwind. De plus, chaque composant peut être paramétré à l'aide d'un ensemble d'accessoires qui peuvent être utilisés pour modifier les styles par défaut du composant.
Rewind-UI est disponible en tant que package NPM et peut être installé à l'aide de la commande suivante:
npm install @rewind-ui/coreRewind-UI est conçu pour être utilisé avec React et Tailwind CSS. Pour utiliser Rewind-UI, vous devez d'abord installer ReactJS et Tailwind CSS dans votre projet. De plus, vous devez également installer les packages NPM suivants:
npm install tailwind-scrollbar @tailwindcss/forms @tailwindcss/typography Après avoir installé Tailwind CSS, vous devez le configurer pour travailler avec Rewind-UI. Pour ce faire, vous devez d'abord créer un fichier tailwind.config.js dans le répertoire racine de votre projet. Ensuite, ajoutez le code suivant à ce fichier de configuration:
Il est fortement recommandé d'ajouter uniquement les fichiers de style nécessaire pour éviter d'avoir un fichier CSS gonflé
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
} )
]
} ;Pour commencer à utiliser les composants REWIND-UI, ajoutez simplement l'instruction d'importation suivante en haut de votre composant React:
import { Button } from '@rewind-ui/core' ;Ensuite, vous pouvez utiliser le composant dans votre code JSX:
< Button > Click Me </ Button > Chaque composant a un ensemble de styles par défaut qui peuvent être paramétrés à l'aide des accessoires correspondants. Par exemple, le composant Button a une couleur bleue par défaut et une taille moyenne. Ces valeurs peuvent être modifiées en définissant les accessoires color et size sur le composant:
< Button color = "black" size = "sm" > Click Me </ Button > De plus, le style d'un composant peut être personnalisé en y passant l'hélice normale className . Cet accessoire peut être utilisé pour remplacer les styles par défaut du composant. Par exemple, le code suivant modifiera le poids de la police du bouton en semi-vide:
Rewind-UI utilise Tailwind-Merge pour fusionner les classes par défaut avec les classes que vous fournissez dans l'hélice className et résoudre tous les conflits possibles.
< Button color = "black" size = "sm" className = "font-semibold" > Click Me </ Button > Essayant d'éviter de faire en sorte que l'utilisateur utilise plusieurs propriétés encore et encore, nous avons créé une variant prop. Une variante est essentiellement un ensemble de propriétés prédéfinies qui peuvent être utilisées pour personnaliser un composant. Par exemple, le composant Button a une variante success qui peut être utilisée pour créer un bouton de réussite de type bootstrap:
< Button variant = "success" > Click Me </ Button >Vous pouvez en savoir plus sur les variantes de chaque composant dans leur page de documentation correspondante.
Tous les composants de Rewind-UI sont hautement personnalisables. Cela signifie que vous pouvez facilement modifier les styles par défaut d'un composant en remplaçant les classes CSS de vent arrière correspondantes. Vous pouvez en savoir plus sur la personnalisation du style sur la page de thème.
Un merci spécial aux personnes suivantes:
Un merci spécial aux équipes suivantes:
