Buat Peringatan Kustom di Aplikasi React Anda Dengan Chakra UI
Table of content:
- Menginstal UI Chakra
- Menyiapkan Chakra UI
- Membuat Lansiran Khusus Menggunakan Komponen Lansiran
- Menyesuaikan Pesan Peringatan Menggunakan Varian Prop
- Menyesuaikan Pesan Peringatan Anda Menggunakan Prop className
- Memicu Pesan Peringatan dalam Menanggapi Peristiwa Pengguna
- Sekarang Anda Dapat Membuat Lansiran yang Dapat Disesuaikan
Peringatan adalah pesan yang ditampilkan di situs web/aplikasi web untuk menyampaikan informasi penting kepada pengguna. Mereka memainkan peran penting dalam aplikasi web. Ada banyak cara untuk membuat peringatan di React; Chakra UI membuat prosesnya mudah dan efisien.
Chakra UI adalah pustaka komponen populer untuk React yang menyediakan sekumpulan komponen UI yang dapat disesuaikan dan diakses.
Menginstal UI Chakra
Untuk menggunakan pustaka Chakra UI, salah satu dari banyak pustaka komponen reaksi, Anda harus menginstalnya terlebih dahulu. Anda dapat menginstalnya dengan menjalankan perintah terminal berikut di direktori proyek node.js Anda:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
Alternatifnya, Anda dapat menginstal Chakra UI menggunakan Yarn. Untuk melakukannya, jalankan perintah berikut:
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Menyiapkan Chakra UI
Setelah menginstal Chakra UI, Anda harus membuatnya tersedia di aplikasi Anda. Untuk melakukan ini, Anda perlu mengatur Penyedia Chakra komponen.
Itu Penyedia Chakra komponen adalah komponen tingkat atas yang disediakan oleh perpustakaan Chakra UI. Itu membungkus seluruh aplikasi dan menyediakan tema dan konteks gaya untuk semua komponennya.
Untuk mengatur Penyedia Chakra komponen, impor dari @chakra-ui/reaksi:
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { ChakraProvider } from '@chakra-ui/react'ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<ChakraProvider>
<App />
</ChakraProvider>
</React.StrictMode>
)
Itu Penyedia Chakra komponen pendukung a tema menopang. Melewati tema menopang ke Penyedia Chakra komponen memastikan bahwa semua komponen Chakra UI dalam aplikasi dapat mengakses tema dan konteks gaya yang disediakan. Itu tema penyangga adalah opsional; jika tidak lulus, Chakra UI akan menggunakan tema bawaan.
Membuat Lansiran Khusus Menggunakan Komponen Lansiran
Chakra UI menawarkan empat komponen yang memungkinkan Anda membuat lansiran khusus: Peringatan, AlertIcon, AlertTitleDan AlertDescription.
Untuk membuat pesan peringatan Anda, impor komponen ini dari perpustakaan Chakra UI dan gunakan sebagai berikut:
import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle} from '@chakra-ui/react'function App() {
return (
<div>
<Alert status='success'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
</div>
)
}
export default App
Setelah mengimpor komponen, file Peringatan komponen menampilkan pesan kepada pengguna. Ini memiliki status prop disetel ke “sukses”, yang menunjukkan bahwa pesan tersebut adalah pesan sukses.
Ada tiga status lainnya: “info”, “error”, dan “warning”. Skema warna dan ikon yang digunakan peringatan akan bergantung pada status pesan.
Itu Peringatan komponen berisi tiga anak: AlertIcon, AlertTitleDan AlertDescription. Itu AlertIcon komponen menampilkan ikon kecil di sebelah pesan, AlertTitle menampilkan pesan utama, dan AlertDescription menampilkan deskripsi pesan yang lebih rinci.
Blok kode sebelumnya akan menghasilkan peringatan yang terlihat seperti ini:
Menyesuaikan Pesan Peringatan Menggunakan Varian Prop
Untuk menyesuaikan tampilan pesan peringatan, gunakan varian penyangga dari Peringatan komponen. Itu varian prop menentukan tampilan visual pesan peringatan dan menentukan skema warna, ikon, dan bobot font pesan berdasarkan nilai yang Anda berikan padanya.
Itu varian prop menerima beberapa nilai string seperti tak kentara, padat, aksen kiri, aksen atas, aksen kananDan aksen bawah. Setiap nilai mewakili gaya visual yang berbeda dari pesan peringatan.
Berikut adalah contoh dari empat komponen peringatan dengan varian yang berbeda:
import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle, Flex} from '@chakra-ui/react'function App() {
return (
<div>
<Flex justify='center' gap='3' direction='column' mt='4'>
<Alert status='success' variant='solid'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
<Alert status='success' variant='subtle'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
<Alert status='success' variant='top-accent'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
<Alert status='success' variant='left-accent'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
</Flex>
</div>
)
}
export default App
Merender blok kode di atas akan menampilkan lansiran khusus seperti ini:
Menyesuaikan Pesan Peringatan Anda Menggunakan Prop className
Daripada bertahan dengan tampilan default dari pesan peringatan, Anda dapat menyesuaikannya menggunakan nama kelas menopang. Anda menggunakan nama kelas prop untuk menentukan kelas CSS dan menerapkan gaya khusus Anda ke pesan peringatan.
Misalnya:
import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle} from '@chakra-ui/react'function App() {
return (
<div>
<Alert status='success' className='alert'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
</div>
)
}
export default App;
Dalam contoh ini, komponen peringatan memiliki “peringatan” kelas CSS. Setelah menentukan kelas CSS, Anda dapat menentukan gaya Anda di file CSS Anda.
Seperti itu:
.alert {
color: red;
font-family: cursive;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
Kode di atas akan menerapkan gaya CSS ke komponen lansiran. Jika Anda terbiasa dengan alat peraga gaya Chakra UI, Anda harus menggunakannya untuk menata pesan peringatan alih-alih nama kelas menopang.
Setelah menerapkan gaya CSS di atas, komponen lansiran akan ditampilkan seperti yang terlihat pada gambar di bawah ini:
Memicu Pesan Peringatan dalam Menanggapi Peristiwa Pengguna
Anda telah membuat komponen peringatan yang secara konsisten menampilkan pesan peringatan di layar. Namun, untuk meningkatkan pengalaman pengguna, Anda dapat memicu pesan peringatan sebagai respons terhadap peristiwa tertentu yang dimulai pengguna, menggunakan Pendengar peristiwa JavaScript. Peristiwa ini dapat mencakup mengklik tombol, mengirimkan formulir, atau mengalami kesalahan.
Untuk memicu pesan peringatan Anda sebagai respons terhadap peristiwa, gunakan status Bereaksi dan menampilkan penyangga komponen Chakra UI.
Misalnya:
import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle, Button, CloseButton} from '@chakra-ui/react'function App() {
const [display, setDisplay] = React.useState('none');
function notify() {
setDisplay('flex');
}
function close() {
setDisplay('none');
}
return (
<div className="app">
<Alert status='success' display={display} variant='solid'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
<CloseButton position='absolute' top='6px' right='6px' onClick={close}/>
</Alert>
<Button onClick={notify} mt='4'>Click Me</Button>
</div>
)
}
export default App
Blok kode ini mengelola status tampilan notifikasi dengan useState kait. Ini menyetel status awal tampilan notifikasi ke “tidak ada”, yang menyembunyikan notifikasi.
Ketika pengguna mengklik Tombolitu memanggil memberitahu fungsi. Memanggil fungsi beri tahu mengubah nilai menampilkan nyatakan dari “tidak ada” menjadi “fleksibel.”, membuat notifikasi terlihat.
Ketika pengguna mengklik closeButton, ini memanggil fungsi tutup. Itu mengubah status tampilan kembali ke “tidak ada” yang menyembunyikan notifikasi.
Sekarang Anda Dapat Membuat Lansiran yang Dapat Disesuaikan
Sekarang Anda telah mempelajari cara membuat lansiran khusus di aplikasi React menggunakan Chakra UI. Dengan Chakra UI, membuat peringatan khusus di React menjadi mudah dan intuitif, memungkinkan kami memberikan informasi yang jelas dan ringkas kepada pengguna kami. Chakra UI menyediakan banyak komponen UI lain yang dapat disesuaikan dan diakses untuk membantu Anda membuat aplikasi React yang hebat.