Primiți alerte consistente și atractive pe site-ul dvs. React cu această bibliotecă.
Alertele sunt mesaje afișate pe un site web/aplicație web pentru a transmite informații importante unui utilizator. Ele joacă un rol crucial în aplicațiile web. Există multe modalități de a crea alerte în React; Chakra UI face procesul ușor și eficient.
Chakra UI este o bibliotecă de componente populară pentru React, care oferă un set de componente UI personalizabile și accesibile.
Instalarea Chakra UI
Pentru a utiliza biblioteca Chakra UI, una dintre multele biblioteci de componente react, mai întâi trebuie să-l instalați. Îl puteți instala rulând următoarea comandă de terminal în directorul proiectului node.js:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
Alternativ, puteți instala Chakra UI folosind Yarn. Pentru a face acest lucru, rulați următoarea comandă:
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Configurarea interfeței de utilizare Chakra
După instalarea Chakra UI, trebuie să o faceți disponibilă în aplicația dvs. Pentru a face acest lucru, trebuie să configurați
ChakraProvider componentă.The ChakraProvider componenta este o componentă de nivel superior pe care o oferă biblioteca Chakra UI. Acesta cuprinde întreaga aplicație și oferă tema și contextul de stil tuturor componentelor sale.
Pentru a configura ChakraProvider componentă, importați-o din @chakra-ui/react:
import Reacţiona din'reacţiona'
import ReactDOM din„react-dom/client”
import App din„./App”
import { ChakraProvider } din„@chakra-ui/react”
ReactDOM.createRoot(document.getElementById('rădăcină') la fel de HTMLElement).render(
</ChakraProvider>
</React.StrictMode>
)
The ChakraProvider suporturile componente a temă recuzită. Trecând pe lângă temă prop la ChakraProvider componenta asigură că toate componentele Chakra UI din aplicație pot accesa tema și contextul de stil furnizat. The temă prop este opțional; dacă nu o treci, Chakra UI va folosi o temă implicită.
Crearea unei alerte personalizate folosind componente de alertă
Chakra UI oferă patru componente care vă permit să creați o alertă personalizată: Alerta, Pictogramă de alertă, AlertTitle, și AlertDescription.
Pentru a crea mesajul de alertă, importați aceste componente din biblioteca Chakra UI și utilizați-le după cum urmează:
import Reacţiona din'reacţiona';
import {Alert, AlertIcon, AlertDescription, AlertTitle} din„@chakra-ui/react”funcţieApp() {
întoarcere ('succes'> Bun venit!!!</AlertTitle> E frumos să te am aici</AlertDescription>
</Alert>
</div>
)
}
exportMod implicit App
După importarea componentelor, Alerta componenta afișează un mesaj utilizatorului. Are o stare prop setat la „succes”, ceea ce indică faptul că mesajul este un mesaj de succes.
Există alte trei stări: „informații”, „eroare” și „avertisment”. Schema de culori și pictograma pe care le utilizează alerta vor depinde de starea mesajului.
The Alerta componenta conține trei copii: Pictogramă de alertă, AlertTitle, și AlertDescription. The Pictogramă de alertă componenta afișează o pictogramă mică lângă mesaj, AlertTitle afișează mesajul principal și AlertDescription afișează o descriere mai detaliată a mesajului.
Blocul de cod anterior va genera o alertă care arată astfel:
Personalizarea mesajelor de alertă utilizând varianta Prop
Pentru a personaliza aspectul mesajului de alertă, utilizați variantă prop de la Alerta componentă. The variantă prop definește aspectul vizual al mesajului de alertă și determină schema de culori, pictograma și greutatea fontului mesajului pe baza valorii pe care i-o transmiteți.
The variantă prop acceptă mai multe valori șir, cum ar fi subtil, solid, accent stâng, accent de vârf, accent de dreapta, și accent de jos. Fiecare valoare reprezintă un stil vizual diferit al mesajului de alertă.
Iată un exemplu de patru componente de alertă cu diferite variante:
import Reacţiona din'reacţiona';
import {Alert, AlertIcon, AlertDescription, AlertTitle, Flex} din„@chakra-ui/react”funcţieApp() {
întoarcere ('centru' decalaj='3' direcție='coloană' mt='4'> 'succes' varianta='solid'> Bun venit!!!</AlertTitle> E frumos să te am aici</AlertDescription>
</Alert>
'succes' varianta='subtil'> Bun venit!!!</AlertTitle> E frumos să te am aici</AlertDescription>
</Alert>
'succes' varianta=„accent de vârf”> Bun venit!!!</AlertTitle> E frumos să te am aici</AlertDescription>
</Alert>
'succes' varianta=„accent din stânga”> Bun venit!!!</AlertTitle> E frumos să te am aici</AlertDescription>
</Alert>
</Flex>
</div>
)
}
exportMod implicit App
Redarea blocului de cod de mai sus va afișa o alertă personalizată ca aceasta:
Personalizarea mesajelor de alertă folosind className Prop
În loc să rămâneți cu aspectul implicit al mesajelor de alertă, îl puteți personaliza folosind numele clasei recuzită. Folosești numele clasei prop pentru a defini o clasă CSS și a aplica stilul personalizat mesajului de alertă.
De exemplu:
import Reacţiona din'reacţiona';
import {Alert, AlertIcon, AlertDescription, AlertTitle} din„@chakra-ui/react”funcţieApp() {
întoarcere ('succes' className='alerta'> Bun venit!!!</AlertTitle> E frumos să te am aici</AlertDescription>
</Alert>
</div>
)
}
exportMod implicit Aplicație;
În acest exemplu, componenta alertă are o clasă CSS „alert”. După definirea clasei CSS, vă puteți defini stilurile în fișierul CSS.
Ca astfel:
.alerta {
culoarea rosie;
familie de fonturi: cursiv;
display: flex;
flex-direcție: coloană;
decalaj: 0.4rem;
}
Codul de mai sus va aplica stilurile CSS la componenta de alertă. Dacă sunteți familiarizat cu elementele de recuzită în stil Chakra UI, ar trebui să le utilizați pentru a stila mesajele de alertă în loc de numele clasei recuzită.
După aplicarea stilurilor CSS de mai sus, componenta de alertă se va afișa așa cum se vede în imaginea de mai jos:
Declanșarea mesajelor de alertă ca răspuns la evenimentele utilizatorului
Ați creat o componentă de alertă care afișează în mod constant un mesaj de alertă pe ecran. Cu toate acestea, pentru a îmbunătăți experiența utilizatorului, puteți declanșa mesajul de alertă ca răspuns la anumite evenimente inițiate de un utilizator, utilizând ascultători de evenimente JavaScript. Aceste evenimente pot include clic pe un buton, trimiterea unui formular sau întâlnirea unei erori.
Pentru a declanșa mesajul de alertă ca răspuns la evenimente, utilizați starea React și afişa prop de componentele Chakra UI.
De exemplu:
import Reacţiona din'reacţiona';
import {Alert, AlertIcon, AlertDescription, AlertTitle, Button, CloseButton} din„@chakra-ui/react”funcţieApp() {
const [display, setDisplay] = React.useState('nici unul');funcţienotifica() {
setDisplay('contracta');
}funcţieînchide() {
setDisplay('nici unul');
}întoarcere (
„aplicație”>'succes' afișare={afișare} variantă='solid'> Bun venit!!!</AlertTitle> E frumos să te am aici</AlertDescription> 'absolut' sus=„6px” dreapta=„6px” onClick={close}/>
</Alert>
exportMod implicit App
Acest bloc de coduri gestionează starea afișajului de notificare cu useState cârlig. Setează starea inițială a afișajului de notificare la „niciuna”, ceea ce ascunde notificarea.
Când utilizatorul face clic pe Buton, se numește notifica funcţie. Apelarea funcției de notificare modifică valoarea lui afişa stare de la „niciunul” la „flex.”, făcând vizibilă notificarea.
Când utilizatorul face clic pe closeButton, apelează funcția de închidere. Schimbă starea afișajului înapoi la „niciunul”, ceea ce ascunde notificarea.
Acum puteți crea alerte personalizabile
Acum ați învățat cum să creați o alertă personalizată în aplicația dvs. React folosind Chakra UI. Cu Chakra UI, crearea de alerte personalizate în React este ușoară și intuitivă, permițându-ne să oferim informații clare și concise utilizatorilor noștri. Chakra UI oferă multe alte componente UI personalizabile și accesibile pentru a vă ajuta să construiți aplicații React grozave.
