kimia UI

Komponen UI untuk Bereaksi Dibangun dengan Tailwind CSS 3

Mengapa pendekatan ini?

Tailwind CSS adalah kerangka kerja CSS utilitas-pertama untuk membangun antarmuka pengguna khusus dengan cepat. IL memungkinkan Anda menulis gaya Anda tanpa meninggalkan HTML Anda.

Kerugian terbesar dari CSS Tailwind adalah risiko memiliki kelas yang terlalu lama yang akan membuat kode kita tidak cukup mudah dibaca.

Karena React berbasis komponen, kami dapat mengekstrak logika komponen dengan kelas-kelasnya dan menggunakannya kembali di tempat lain yang akan menghasilkan lebih banyak kode yang dapat dibaca dengan lebih banyak komponen dan lebih sedikit kelas.

Itulah mengapa saya telah membuat koleksi komponen UI ini sepenuhnya dapat disesuaikan. Cukup salin dan tempel komponen yang ingin Anda gunakan

Semua komponen ada di direktori paket .

Setiap komponen berisi 2 sub-direktori

• Contoh : Berisi contoh untuk setiap varian komponen dalam TypeScript

• Cuplikan : Berisi contoh untuk setiap varian komponen dalam reaksi polos

? Tambahkan komponen baru

Untuk menambahkan komponen baru:

Buat direktori baru Anda di SRC/Packages/{YourComponentName} di dalam folder Anda, Anda akan membuat 2 subfolder dan satu file

• Contoh : Akan berisi contoh untuk komponen Anda di TypeScript **
• Cuplikan : Akan berisi contoh dalam reaksi biasa dan akan digunakan sebagai cuplikan kode untuk disalin
• {Nama komponen Anda} .tsx akan berisi logika komponen Anda

Buat file baru Anda (rute) di src/halaman/komponen/{nama komponen Anda} . Maka Anda akan mengimpor semua contoh dan cuplikan untuk komponen Anda

Dukungan Browser

Komponen -komponen ini kompatibel dengan semua browser

Chrome	Firefox	Tepian	Safari	Opera

Kontribusi

Jika Anda ingin berkontribusi pada proyek, memperbaiki bug, meningkatkan aksesibilitas atau membuka masalah, silakan ikuti panduan kontribusi kami

Pertama, jalankan server pengembangan:

npm run dev
# or
yarn dev

Buka http: // localhost: 3000 dengan browser Anda untuk melihat hasilnya.