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.
Daftar isi
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 install @blueprintjs/core
Setelah menginstal Blueprint UI, Anda harus mengimpor file CSS dari perpustakaan:
@import "normalize.css";
@import "@blueprintjs/core/lib/css/blueprint.css";
@import "@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.
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 menggunakan Blueprint UI, Anda harus menginstal komponen Blueprint UI Popover2.
Untuk melakukannya, jalankan kode berikut di terminal Anda:
npm install --save @blueprintjs/popover2
Pastikan untuk mengimpor lembar gaya paket di file CSS Anda:
@import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
Setelah mengimpor stylesheet, Anda dapat menggunakan komponen Popover2 untuk membuat popover di aplikasi Anda.
Misalnya:
import React from "react";
import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";function App() {
const popoverContent = (
<div>
<h3>Popover Title</h3>
<p>This is the content inside the popover.</p>
</div>
);return (
<div>
<Popover2 content={popoverContent}>
<Button intent="success" text="Click Me" />
</Popover2>
</div>
);
}export default App;
Kode ini membuat popover menggunakan komponen Popover2. Itu juga mendefinisikan variabel popoverContent, yang berisi kode JSX untuk konten popover.
Komponen Popover2 menggunakan popoverContent sebagai nilai prop kontennya. Prop konten menentukan konten yang ditampilkan dalam popover. Di sini, komponen Popover2 membungkus komponen Button. Ini menyebabkan popover ditampilkan saat Anda mengklik tombol.
Popover terlihat sederhana, seperti yang ditunjukkan di sini:
Anda dapat mengatur gaya konten popover dengan meneruskan prop className ke kode JSX popoverContent:
const popoverContent = (
<div className="popover">
<h3>Popover Title</h3>
<p>This is the content inside the popover.</p>
</div>
);
Anda kemudian dapat menentukan kelas CSS di file CSS Anda:
.popover {
padding: 1rem;
background-color: #e2e2e2;
font-family: cursive;
}
Sekarang popover akan terlihat sedikit lebih baik:
Komponen Popover2 mengambil beberapa alat peraga yang akan membantu Anda mengonfigurasinya agar sesuai dengan kebutuhan Anda. Beberapa dari props ini adalah popoverClassName, onInteraction, isOpen, minimal, dan placement.
Penopang penempatan menentukan posisi yang disukai dari popover 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 {
background-color: #e2e2e2;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
border-radius: 12px;
padding: 1rem;
}
Setelah membuat kelas CSS, gunakan prop popoverClassName untuk menerapkan gaya khusus ke komponen Popover2:
<Popover2
content={popoverContent}
placement="bottom-end"
popoverClassName="custom-popover"
minimal={true}
>
<Button intent="success" text="Click Me" />
</Popover2>
Prop minimal 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 peringatan 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:
import React from "react";
import { Alert, Button } from "@blueprintjs/core";function App() {
const [isOpen, setIsOpen] = React.useState(false);const handleOpen = () => {
setIsOpen(true);
};const handleClose = () => {
setIsOpen(false);
};return (
<div>
<Alert isOpen={isOpen} onClose={handleClose} confirmButtonText="Close">
<p>This is an alert message</p>
</Alert><Button text="Click Me" intent="success" onClick={handleOpen} />
</div>
);
}export default App;
Contoh ini menunjukkan bagaimana Anda harus mengimpor komponen Peringatan dari paket @blueprintjs/core. Komponen Peringatan merender pesan peringatan di layar. Ini juga membutuhkan tiga alat peraga: isOpen, onClose, dan confirmButtonText.
Prop isOpen menentukan apakah peringatan terlihat atau tidak. Setel ke true untuk menampilkan peringatan dan false untuk menyembunyikannya. Prop onClose adalah fungsi panggilan balik yang berjalan saat pengguna menutup peringatan.
Terakhir, prop confirmButtonText 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 komponen OverlayToaster. Komponen OverlayToaster membuat instance Toaster yang kemudian digunakan untuk membuat toast individu.
Misalnya:
import React from "react";
import { OverlayToaster, Button } from "@blueprintjs/core";const toasterInstance = OverlayToaster.create({ position: "top-right" });
function App() {
const showToast = () => {
toasterInstance.show({
message: "This is a toast",
intent: "primary",
timeout: 3000,
isCloseButtonShown: false,
icon: "bookmark",
});
};return (
<div>
<Button text="Click Me" intent="success" onClick={showToast} />
</div>
);
}export default App;
Blok kode di atas menggunakan metode OverlayToaster.create untuk menghasilkan instance toaster dan menentukan posisinya menggunakan prop position.
Itu juga mendefinisikan fungsi showToast. Fungsi ini menggunakan metode show dari toasterInstance untuk menampilkan toast saat dipanggil. Metode show mengambil objek dengan message, intent, timeout, isCloseButtonShown, dan icon props.
Prop pesan menentukan isi teks dari toast, sedangkan prop intent menentukan jenis toast. Gaya roti bakar akan bervariasi berdasarkan nilainya.
Anda dapat mengontrol berapa lama notifikasi toast ditampilkan menggunakan prop timeout. Prop ikon menentukan elemen ikon untuk ditampilkan di roti panggang. Dengan prop isCloseButtonShown, 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 sedang 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.
