Gunakan perpustakaan Blueprint dan Anda tidak akan kesulitan lagi untuk menghasilkan situs web yang menarik dan dapat diakses.
Membuat aplikasi React dari awal dapat menjadi tugas yang memakan waktu dan menantang, terutama jika berkaitan dengan penataan komponen. Di situlah Blueprint UI Toolkit berguna. Toolkit ini adalah seperangkat komponen UI yang dapat digunakan kembali yang dapat membantu Anda membuat antarmuka yang konsisten dan menarik secara visual untuk aplikasi React Anda.
Pelajari dasar-dasar Blueprint UI Toolkit dan cara menggunakannya untuk membuat aplikasi React sederhana.
Toolkit UI Cetak Biru adalah a Bereaksi perpustakaan komponen UI. Ini berisi kumpulan komponen siap pakai yang mudah digunakan dan disesuaikan. Anda dapat menggunakan komponen pra-desain ini di luar kotak atau memodifikasinya agar sesuai dengan kebutuhan spesifik Anda.
Komponen Blueprint UI Toolkit meliputi Buttons, Forms, Modals, Navigation, dan Tables. Penggunaan komponen ini dapat menghemat waktu dan tenaga karena Anda tidak perlu merancang dan membuat setiap komponen dari awal.
Untuk memulai dengan Blueprint UI Toolkit, Anda harus melakukannya membuat aplikasi Bereaksi.
Setelah proyek Anda disiapkan, Anda dapat menginstal Blueprint UI Toolkit menggunakan penginstal paket Node apa pun yang Anda pilih. Untuk menginstal Blueprint UI Toolkit menggunakan npm, jalankan perintah berikut di terminal Anda:
npm instal @blueprintjs/core
Untuk menggunakan benang, jalankan perintah ini:
benang tambahkan @blueprintjs/core
Setelah Anda menginstal Blueprint UI Toolkit, Anda dapat menggunakan komponen pilihan Anda di aplikasi React.
Sebelum menggunakan komponen, sertakan file CSS dari Blueprint UI Toolkit:
@impor"normalkan.css";
@impor"@blueprintjs/core/lib/css/blueprint.css";
@impor"@blueprintjs/icons/lib/css/blueprint-icons.css";
Menambahkan blok kode di atas ke file CSS Anda menerapkan gaya UI Blueprint ke komponennya.
Misalnya, untuk menambahkan tombol ke aplikasi Anda, gunakan Tombol komponen dari Blueprint UI Toolkit:
impor Reaksi dari"reaksi";
impor { Tombol } dari"@blueprintjs/core";fungsiAplikasi() {
kembali (
eksporbawaan Aplikasi;
Blok kode ini menambahkan tombol ke aplikasi Anda menggunakan Tombol komponen. Itu Tombol komponen mengambil alat peraga seperti maksud, teks, ikon, kecil, Dan besar.
Itu maksud prop mendefinisikan sifat tombol, yang mencerminkan warna latar belakangnya. Dalam contoh ini, tombol memiliki a kesuksesan maksud yang memberikan warna latar belakang hijau. Blueprint UI menawarkan beberapa maksud inti termasuk utama (biru), kesuksesan (hijau), peringatan (oranye), dan bahaya (merah).
Anda dapat menentukan teks yang muncul di dalam tombol dengan teks menopang. Anda juga dapat menambahkan ikon ke tombol menggunakan ikon menopang. Di samping ikon penyangga adalah ikon kanan prop, yang menambahkan ikon ke sisi kanan tombol.
Terakhir, the besar Dan kecil alat peraga boolean menentukan ukuran tombol. Itu besar prop membuat tombol lebih besar, sedangkan kecil prop membuatnya lebih kecil.
Blok kode sebelumnya akan menghasilkan tombol yang terlihat seperti ini:
Anda juga dapat menggunakan AnchorButton komponen untuk membuat tombol di aplikasi Anda. Itu AnchorButton komponen adalah versi khusus dari komponen Tombol yang dirancang secara eksplisit untuk digunakan sebagai tautan.
Komponen ini menerima banyak props yang sama dengan komponen Button, termasuk teks, besar, kecil, maksud, Dan ikon. Ia juga menerima href Dan target Atribut.
Itu href prop menentukan URL yang ditautkan tombol, dan target prop menentukan jendela atau bingkai target untuk tautan:
impor Reaksi dari"reaksi";
impor { Tombol Jangkar } dari"@blueprintjs/core";fungsiAplikasi() {
kembali (
href=" https://example.com/"
niat="utama"
teks="Klik Saya"
sasaran="_kosong"
/>
</div>
);
}
eksporbawaan Aplikasi;
Blok kode ini di atas merender sebuah AnchorButton komponen. Komponennya href nilai penyangga adalah “ https://example.com/” dan target nilai prop adalah “_blank” yang berarti tautan akan terbuka di tab atau jendela browser lain.
Komponen penting lainnya dari Blueprint UI Toolkit adalah Kartu komponen. Ini adalah komponen yang dapat digunakan kembali yang menampilkan informasi dengan cara visual yang menarik.
Komponen Kartu mengambil dua alat peraga interaktif Dan ketinggian. Itu ketinggian prop mengontrol kedalaman bayangan kartu, dengan nilai yang lebih tinggi menghasilkan efek bayangan yang lebih menonjol.
Itu interaktif prop menerima nilai boolean. Jika disetel ke true, ini mengaktifkan interaksi arahkan dan klik pada kartu, yang memungkinkannya merespons masukan pengguna.
Misalnya:
impor Reaksi dari"reaksi";
impor { Kartu, Ketinggian } dari"@blueprintjs/core";fungsiAplikasi() {
kembali (BENAR} ketinggian={Ketinggian. DUA}> Ini adalah Kartu </h2>
Ini beberapa konten di dalam kartu saya </p>
</Card>
</div>
);
}
eksporbawaan Aplikasi;
Dalam contoh ini, Kartu komponen memiliki judul dan beberapa konten. Itu interaktif prop diatur ke BENAR.
Anda juga mengimpor Ketinggian komponen dari @blueprintjs/core. Itu Ketinggian component adalah enum yang menentukan sekumpulan nilai yang telah ditentukan sebelumnya yang dapat Anda gunakan untuk menyetel kedalaman bayangan komponen.
Berikut adalah nilai yang tersedia dari Ketinggian enum:
- Ketinggian. NOL: Nilai ini menyetel kedalaman bayangan ke 0, menunjukkan bahwa komponen tidak memiliki bayangan yang diterapkan
- Ketinggian. SATU: Nilai ini mengatur kedalaman bayangan ke 1.
- Ketinggian. DUA: Nilai ini mengatur kedalaman bayangan ke 2.
- Ketinggian. TIGA: Nilai ini mengatur kedalaman bayangan ke 3.
- Ketinggian. EMPAT: Nilai ini mengatur kedalaman bayangan ke 4.
- Ketinggian. LIMA: Nilai ini mengatur kedalaman bayangan ke 5.
Merender blok kode di atas akan menampilkan gambar di layar Anda yang terlihat seperti ini:
Komponen Blueprint UI Toolkit mudah disesuaikan. Anda dapat menggunakan CSS tradisional untuk mengubah tampilan komponen, atau Anda dapat menggunakan alat peraga yang disediakan untuk mengubah perilakunya.
Misalnya, Anda dapat menyesuaikan tampilan tombol dengan memasukkan a nama kelas menopang:
impor Reaksi dari"reaksi";
impor { Tombol } dari"@blueprintjs/core";fungsiAplikasi() {
kembali (
eksporbawaan Aplikasi;
Blok kode di atas menerapkan kelas khusus ke tombol, memungkinkan Anda mengubah tampilannya menggunakan CSS:
.my-button{
radius perbatasan: 10px;
lapisan: 0.4rem 0.8rem;
}
Menerapkan gaya ini akan menyebabkan tombol Anda terlihat seperti ini:
Masih Banyak Lagi untuk Blueprint UI
Blueprint UI menawarkan lebih banyak komponen daripada yang disebutkan di atas, seperti Alert, Popover, toast, dll. Namun, dengan informasi yang diberikan, Anda dapat membuat aplikasi React sederhana menggunakan Blueprint UI.
Anda dapat mendesain aplikasi React Anda menggunakan metode yang berbeda. Anda dapat menggunakan CSS tradisional, SASS/SCSS, Tailwind CSS, dan CSS di pustaka JS seperti emosi, komponen gaya, dll.