rewindui
@rewind-ui
Dibangun khusus untuk digunakan dengan CSS React dan Tailwind, Rewind-UI menawarkan berbagai komponen yang dapat diakses dan sangat dapat disesuaikan yang dapat dengan mudah diintegrasikan ke dalam proyek React apa pun. Rewind-UI hadir dengan satu set gaya default yang dapat dengan mudah disesuaikan menggunakan kelas CSS Tailwind. Selain itu, setiap komponen dapat diparameterisasi menggunakan satu set alat peraga yang dapat digunakan untuk mengubah gaya default komponen.
Rewind-UI tersedia sebagai paket NPM dan dapat diinstal menggunakan perintah berikut:
npm install @rewind-ui/coreRewind-UI dirancang untuk digunakan dengan CSS React dan Tailwind. Untuk menggunakan Rewind-UI, Anda harus terlebih dahulu menginstal ReactJs dan Tailwind CSS di proyek Anda. Selain itu, Anda juga harus menginstal paket NPM berikut:
npm install tailwind-scrollbar @tailwindcss/forms @tailwindcss/typography Setelah menginstal CSS Tailwind, Anda harus mengonfigurasinya untuk bekerja dengan Rewind-UI. Untuk melakukan ini, Anda harus terlebih dahulu membuat file tailwind.config.js di direktori root proyek Anda. Kemudian, tambahkan kode berikut ke file konfigurasi itu:
Sangat disarankan untuk menambahkan hanya file gaya yang dibutuhkan untuk menghindari file CSS yang membengkak
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
} )
]
} ;Untuk mulai menggunakan komponen Rewind-UI cukup tambahkan pernyataan impor berikut ke bagian atas komponen React Anda:
import { Button } from '@rewind-ui/core' ;Kemudian, Anda dapat menggunakan komponen dalam kode JSX Anda:
< Button > Click Me </ Button > Setiap komponen memiliki satu set gaya default yang dapat diparameterisasi menggunakan alat peraga yang sesuai. Misalnya, komponen Button memiliki warna biru default dan ukuran sedang. Nilai -nilai ini dapat diubah dengan mengatur alat peraga color dan size ke komponen:
< Button color = "black" size = "sm" > Click Me </ Button > Selain itu, gaya komponen dapat disesuaikan dengan meneruskan prop className normal untuk itu. Prop ini dapat digunakan untuk mengganti gaya default komponen. Misalnya, kode berikut akan mengubah berat font tombol menjadi semi-keliling:
Rewind-UI menggunakan Tailwind-Merge untuk menggabungkan kelas-kelas default dengan kelas yang Anda berikan dalam prop className dan menyelesaikan segala kemungkinan konflik.
< Button color = "black" size = "sm" className = "font-semibold" > Click Me </ Button > Mencoba menghindari membuat pengguna menggunakan beberapa properti berulang kali kami telah membuat variant prop. Varian pada dasarnya adalah set properti yang telah ditentukan sebelumnya yang dapat digunakan untuk menyesuaikan komponen. Misalnya, komponen Button memiliki varian success yang dapat digunakan untuk membuat tombol keberhasilan seperti bootstrap:
< Button variant = "success" > Click Me </ Button >Anda dapat membaca lebih lanjut tentang varian masing -masing komponen di halaman dokumentasi yang sesuai.
Semua komponen Rewind-UI sangat dapat disesuaikan. Ini berarti bahwa Anda dapat dengan mudah mengubah gaya default komponen dengan menimpa kelas CSS tailwind yang sesuai. Anda dapat membaca lebih lanjut tentang kustomisasi gaya di halaman tema.
Terima kasih khusus kepada orang -orang berikut:
Terima kasih khusus kepada tim berikut:
