Elemen UI yang sederhana dan bersih dapat menyegarkan desain Anda dan menambahkan sentuhan kualitas ke situs web atau aplikasi Anda.

Blueprint UI adalah toolkit React UI populer yang menyediakan sekumpulan komponen dan gaya yang dapat digunakan kembali untuk membangun aplikasi web modern. Salah satu fitur utama Blueprint UI adalah dukungannya untuk membuat popover, peringatan, dan toast, yang merupakan komponen penting untuk menampilkan informasi dan umpan balik kepada pengguna.

Menginstal UI Cetak Biru

Untuk memulai dengan Blueprint UI, Anda harus menginstalnya terlebih dahulu. Anda dapat melakukan ini menggunakan manajer paket pilihan Anda.

Untuk menginstalnya menggunakan npm, pengelola paket JavaScript, jalankan perintah berikut di terminal Anda:

npm instal @blueprintjs/core

Setelah menginstal Blueprint UI, Anda harus mengimpor file CSS dari perpustakaan:

@impor"normalkan.css";
@impor"@blueprintjs/core/lib/css/blueprint.css";
@impor"@blueprintjs/icons/lib/css/blueprint-icons.css";

Dengan mengimpor file-file ini, Anda akan dapat mengintegrasikan gaya Blueprint UI dengan komponen yang ditawarkan Blueprint UI.

instagram viewer

Membuat Popover Menggunakan Blueprint UI

Popovers adalah tooltips yang muncul saat pengguna mengarahkan kursor atau mengklik suatu elemen. Mereka memberikan informasi atau opsi tambahan kepada pengguna.

Untuk membuat popover di aplikasi React Anda menggunakan Blueprint UI, Anda harus menginstal Blueprint UI Popover2 komponen.

Untuk melakukannya, jalankan kode berikut di terminal Anda:

npm install --save @blueprintjs/popover2

Pastikan untuk mengimpor lembar gaya paket di file CSS Anda:

@impor"@blueprintjs/popover2/lib/css/blueprint-popover2.css";

Setelah mengimpor stylesheet, Anda dapat menggunakan Popover2 komponen untuk membuat popover di aplikasi Anda.

Misalnya:

impor Reaksi dari"reaksi";
impor { Tombol } dari"@blueprintjs/core";
impor { Popover2 } dari"@blueprintjs/popover2";
fungsiAplikasi() {
const popoverContent = (




Judul Popover</h3>




Ini adalah konten di dalam popover.</p>
 </div>
 );


kembali (









eksporbawaan Aplikasi;

Kode ini membuat popover menggunakan Popover2 komponen. Ini juga mendefinisikan a popoverContent variabel, yang berisi kode JSX untuk konten popover.

Itu Popover2 komponen mengambil popoverContent sebagai nilai nya isi menopang. Itu isi prop menentukan konten yang ditampilkan dalam popover. Di sini, Popover2 membungkus komponen a Tombol komponen. Ini menyebabkan popover ditampilkan saat Anda mengklik tombol.

Popover terlihat sederhana, seperti yang ditunjukkan di sini:

Anda dapat menata konten popover dengan mengirimkan a nama kelas menopang ke popoverContent Kode JSX:

const popoverContent = (
'popover'>
Judul Popover</h3>




Ini adalah konten di dalam popover.</p>
 </div>
);

Anda kemudian dapat menentukan kelas CSS di file CSS Anda:

.popover {
lapisan: 1rem;
warna latar belakang: #e2e2e2;
font-family: kursif;
}

Sekarang popover akan terlihat sedikit lebih baik:

Itu Popover2 component mengambil beberapa alat peraga yang akan membantu Anda mengonfigurasinya agar sesuai dengan kebutuhan Anda. Beberapa alat peraga ini adalah popoverClassName, onInteraction, terbuka, minimal, Dan penempatan.

Itu penempatan prop menentukan posisi popover yang disukai relatif terhadap elemen target. Nilai yang tersedia adalah:

  • mobil
  • mulai otomatis
  • akhir otomatis
  • atas
  • mulai-atas
  • ujung atas
  • dasar
  • mulai bawah
  • ujung bawah
  • Kanan
  • mulai kanan
  • ujung kanan
  • kiri
  • kiri-mulai
  • ujung kiri

Dengan popoverClassName, Anda dapat menentukan nama kelas CSS untuk elemen popover. Anda pertama-tama akan membuat kelas CSS di file CSS Anda untuk menggunakan prop.

Misalnya:

.custom-popover {
warna latar belakang: #e2e2e2;
bayangan kotak: 0 10px 15px-3pxrgb(0 0 0 / 0.1);
radius perbatasan: 12px;
lapisan: 1rem;
}

Setelah membuat kelas CSS, gunakan popoverClassName prop untuk menerapkan gaya khusus ke komponen Popover2:

 konten={popoverContent}
 penempatan="ujung bawah"
 popoverClassName="custom-popover"
 minimal={BENAR}
>

Itu minimal prop mengontrol gaya popover. Prop menerima nilai boolean. Jika disetel ke true, popover akan memiliki gaya minimal, tanpa panah, dan tampilan kotak sederhana.

Membuat Peringatan

Lansiran adalah pemberitahuan yang muncul di layar untuk memberi tahu pengguna tentang informasi atau tindakan penting. Mereka biasanya digunakan untuk menampilkan pesan kesalahan, pesan sukses, atau peringatan.

Membuat lansiran di Blueprint UI mirip dengan membuat peringatan menggunakan Chakra UI. Anda akan menggunakan komponen Alert untuk membuat peringatan di aplikasi React Anda menggunakan Blueprint UI.

Berikut contohnya:

impor Reaksi dari"reaksi";
impor { Peringatan, Tombol } dari"@blueprintjs/core";
fungsiAplikasi() {
const [isOpen, setIsOpen] = React.useState(PALSU);


const peganganBuka = () => {
 setIsOpen(BENAR);
 };


const peganganTutup = () => {
 setIsOpen(PALSU);
 };


kembali (




"Menutup">
Ini adalah pesan peringatan </p>
 </Alert>




eksporbawaan Aplikasi;

Contoh ini menunjukkan bagaimana Anda harus mengimpor Peringatan komponen dari @blueprintjs/core kemasan. Itu Peringatan komponen membuat pesan peringatan di layar. Ini juga membutuhkan tiga alat peraga: terbuka, onClose, Dan confirmButtonText.

Itu terbuka prop menentukan apakah lansiran terlihat atau tidak. Setel ke true untuk menampilkan peringatan dan false untuk menyembunyikannya. Itu onClose prop adalah fungsi panggilan balik yang dijalankan saat pengguna menutup peringatan.

Terakhir, the confirmButtonText prop menentukan teks yang ditampilkan pada tombol konfirmasi.

Notifikasi lansiran dalam contoh ini akan terlihat seperti ini:

Membuat Toast Dengan Blueprint UI

Bersulang adalah pemberitahuan yang muncul di layar untuk memberi tahu pengguna tentang informasi atau acara penting. Mereka mirip dengan peringatan tetapi biasanya tidak terlalu mengganggu dan menghilang dengan cepat.

Untuk membuat toast di aplikasi React Anda menggunakan Blueprint UI, gunakan OverlayToaster komponen. Itu OverlayToaster komponen membuat instance Toaster yang kemudian digunakan untuk membuat toast individual.

Misalnya:

impor Reaksi dari"reaksi";
impor { OverlayToaster, Tombol } dari"@blueprintjs/core";
const toasterInstance = OverlayToaster.create({ posisi: "kanan atas" });


fungsiAplikasi() {
const showToast = () => {
 toasterInstance.show({
 pesan: "Ini bersulang",
 maksud: "utama",
 waktu habis: 3000,
 isCloseButtonShown: PALSU,
 ikon: "penanda buku",
 });
 };


kembali (






eksporbawaan Aplikasi;

Blok kode di atas menggunakan OverlayToaster.create metode untuk menghasilkan instance pemanggang dan menentukan posisinya menggunakan posisi menopang.

Ini juga mendefinisikan fungsi showToast. Fungsi ini menggunakan menunjukkan metode dari toasterInstance untuk menampilkan roti saat dipanggil. Itu menunjukkan metode mengambil objek dengan pesan, maksud, waktu habis, isCloseButtonShown, Dan ikon Atribut.

Itu pesan prop menentukan konten teks dari roti bakar, sedangkan maksud prop menentukan jenis roti bakar. Gaya roti bakar akan bervariasi berdasarkan nilainya.

Anda dapat mengontrol berapa lama notifikasi toast ditampilkan menggunakan waktu habis menopang. Itu ikon prop menentukan elemen ikon untuk ditampilkan di toast. Dengan isCloseButtonShown prop, Anda dapat mengontrol apakah tombol tutup ditampilkan di roti panggang.

Blok kode di atas akan menghasilkan roti panggang yang indah saat Anda mengklik tombol, seperti yang terlihat pada gambar di bawah.

Jika Anda ingin membuat pemberitahuan bersulang yang menarik di aplikasi React Anda, Blueprint UI adalah pilihan yang bagus. Ini menyediakan berbagai komponen standar yang dapat Anda gunakan untuk membuat notifikasi yang cocok dengan gaya aplikasi Anda.

Namun, jika Anda mengerjakan proyek kecil yang tidak memerlukan semua fitur Blueprint UI, React Toastify adalah alternatif ringan untuk membuat notifikasi yang indah.

Meningkatkan Pengalaman Pengguna Dengan Toasts, Popovers, dan Alerts

Anda telah belajar cara membuat popover, alert, dan toast di aplikasi React Anda menggunakan Blueprint UI. Komponen ini sangat penting untuk memberikan informasi dan umpan balik kepada pengguna dan dapat meningkatkan pengalaman pengguna aplikasi Anda secara signifikan. Anda dapat dengan mudah membuat komponen ini menggunakan informasi yang telah Anda peroleh dengan sedikit usaha dan penyesuaian.