Získajte konzistentné a atraktívne upozornenia na svojej stránke React s touto knižnicou.
Upozornenia sú správy zobrazené na webovej lokalite/webovej aplikácii s cieľom poskytnúť používateľovi dôležité informácie. Vo webových aplikáciách zohrávajú kľúčovú úlohu. Existuje mnoho spôsobov, ako vytvoriť upozornenia v React; Chakra UI robí proces jednoduchým a efektívnym.
Chakra UI je populárna knižnica komponentov pre React, ktorá poskytuje sadu prispôsobiteľných a prístupných komponentov používateľského rozhrania.
Inštalácia používateľského rozhrania Chakra
Ak chcete použiť knižnicu používateľského rozhrania Chakra, jedna z mnohých knižníc reakčných komponentov, najprv ho musíte nainštalovať. Môžete ho nainštalovať spustením nasledujúceho príkazu terminálu v adresári projektu node.js:
npm i @čakra-ui/reagovať @emócie/reagovať @emócie/štýlový framer-motion
Prípadne si môžete nainštalovať Chakra UI pomocou Yarn. Ak to chcete urobiť, spustite nasledujúci príkaz:
priadza pridať @čakra-ui/reagovať @emócie/reagovať @emócie/štýlový framer-motion
Nastavenie používateľského rozhrania Chakra
Po nainštalovaní používateľského rozhrania Chakra ho musíte sprístupniť vo svojej aplikácii. Ak to chcete urobiť, musíte nastaviť ChakraProvider komponent.
The ChakraProvider komponent je komponent najvyššej úrovne, ktorý poskytuje knižnica používateľského rozhrania Chakra. Obaluje celú aplikáciu a poskytuje kontext témy a štýlu všetkým jej komponentom.
Ak chcete nastaviť ChakraProvider komponent, importujte ho z @čakra-ui/reagovať:
importovať Reagovať od'reagovať'
importovať ReactDOM od'react-dom/client'
importovať App od'./App'
importovať { ChakraProvider } od'@čakra-ui/react'
ReactDOM.createRoot(dokument.getElementById('root') ako HTMLElement).render(
</ChakraProvider>
</React.StrictMode>
)
The ChakraProvider podpery komponentov a tému rekvizita. Prechod cez tému podpera k ChakraProvider komponent zaisťuje, že všetky komponenty používateľského rozhrania Chakra v aplikácii majú prístup k poskytnutej téme a kontextu štýlu. The tému podpera je voliteľná; ak ju neprejdete, používateľské rozhranie Chakra použije predvolenú tému.
Vytvorenie vlastného upozornenia pomocou komponentov upozornenia
Používateľské rozhranie Chakra ponúka štyri komponenty, ktoré vám umožňujú vytvoriť vlastné upozornenie: Upozornenie, AlertIcon, AlertTitle, a AlertDescription.
Ak chcete vytvoriť svoju výstražnú správu, importujte tieto komponenty z knižnice používateľského rozhrania Chakra a použite ich nasledovne:
importovať Reagovať od'reagovať';
importovať {Alert, AlertIcon, AlertDescription, AlertTitle} od'@čakra-ui/react'funkciuApp() {
vrátiť ('úspech'> Vitajte!!!</AlertTitle> Je pekné, že vás tu mám</AlertDescription>
</Alert>
</div>
)
}
exportpredvolená App
Po importovaní komponentov sa Upozornenie komponent zobrazí správu používateľovi. Má a postavenie prop nastavená na „úspech“, čo znamená, že správa je správou o úspechu.
Existujú tri ďalšie stavy: „informácie“, „chyba“ a „upozornenie“. Farebná schéma a ikona, ktorú výstraha používa, budú závisieť od stavu správy.
The Upozornenie komponent obsahuje tri deti: AlertIcon, AlertTitle, a AlertDescription. The AlertIcon komponent zobrazí malú ikonu vedľa správy, AlertTitle zobrazí hlavnú správu a AlertDescription zobrazí podrobnejší popis správy.
Predchádzajúci blok kódu vygeneruje upozornenie, ktoré vyzerá takto:
Prispôsobenie výstražných správ pomocou Variant Prop
Ak chcete prispôsobiť vzhľad výstražnej správy, použite varianta opora z Upozornenie komponent. The varianta prop definuje vizuálny vzhľad výstražnej správy a určuje farebnú schému, ikonu a veľkosť písma správy na základe hodnoty, ktorú jej pridelíte.
The varianta prop akceptuje viacero reťazcových hodnôt ako napr jemný, pevný, ľavý prízvuk, špičkový prízvuk, pravý prízvuk, a spodný prízvuk. Každá hodnota predstavuje iný vizuálny štýl výstražnej správy.
Tu je príklad štyroch komponentov výstrahy s rôznymi variantmi:
importovať Reagovať od'reagovať';
importovať {Alert, AlertIcon, AlertDescription, AlertTitle, Flex} od'@čakra-ui/react'funkciuApp() {
vrátiť ('centrum' medzera ='3' smer ='stĺpec' mt='4'> 'úspech' variant ='pevný'> Vitajte!!!</AlertTitle> Je pekné, že vás tu mám</AlertDescription>
</Alert>
'úspech' variant ='jemný'> Vitajte!!!</AlertTitle> Je pekné, že vás tu mám</AlertDescription>
</Alert>
'úspech' variant ='top-accent'> Vitajte!!!</AlertTitle> Je pekné, že vás tu mám</AlertDescription>
</Alert>
'úspech' variant ='ľavý prízvuk'> Vitajte!!!</AlertTitle> Je pekné, že vás tu mám</AlertDescription>
</Alert>
</Flex>
</div>
)
}
exportpredvolená App
Vykreslením bloku kódu vyššie sa zobrazí vlastné upozornenie, ako je toto:
Prispôsobenie vašich výstražných správ pomocou className Prop
Namiesto toho, aby ste sa držali predvoleného vzhľadu výstražných správ, si ho môžete prispôsobiť pomocou className rekvizita. Používate className prop na definovanie triedy CSS a aplikovanie vlastného štýlu na výstražnú správu.
Napríklad:
importovať Reagovať od'reagovať';
importovať {Alert, AlertIcon, AlertDescription, AlertTitle} od'@čakra-ui/react'funkciuApp() {
vrátiť ('úspech' className='upozornenie'> Vitajte!!!</AlertTitle> Je pekné, že vás tu mám</AlertDescription>
</Alert>
</div>
)
}
exportpredvolená App;
V tomto príklade má komponent výstrahy CSS triedu „alert“. Po definovaní triedy CSS môžete definovať svoje štýly v súbore CSS.
Ako:
.alert {
farba: červená;
font-family: kurzíva;
displej: flex;
smer ohybu: stĺpec;
medzera: 0.4rem;
}
Vyššie uvedený kód použije štýly CSS na komponent výstrahy. Ak ste oboznámení s rekvizitami v štýle používateľského rozhrania Chakra, mali by ste ich použiť na úpravu výstražných správ namiesto className rekvizita.
Po použití vyššie uvedených štýlov CSS sa komponent upozornenia zobrazí tak, ako je to znázornené na obrázku nižšie:
Spustenie výstražných správ v reakcii na udalosti používateľa
Vytvorili ste výstražný komponent, ktorý neustále zobrazuje výstražnú správu na obrazovke. Na zlepšenie používateľského zážitku však môžete spustiť výstražnú správu v reakcii na konkrétne udalosti, ktoré používateľ spustí, pomocou poslucháčov udalostí JavaScript. Tieto udalosti môžu zahŕňať kliknutie na tlačidlo, odoslanie formulára alebo výskyt chyby.
Ak chcete spustiť výstražnú správu v reakcii na udalosti, použite stav Reagovať a displej podpera komponentov používateľského rozhrania Chakra.
Napríklad:
importovať Reagovať od'reagovať';
importovať {Alert, AlertIcon, AlertDescription, AlertTitle, Button, CloseButton} od'@čakra-ui/react'funkciuApp() {
konšt [display, setDisplay] = React.useState('žiadny');funkciuoznámiť() {
setDisplay('flex');
}funkciuZavrieť() {
setDisplay('žiadny');
}vrátiť (
"aplikácia">'úspech' display={display} variant='pevný'> Vitajte!!!</AlertTitle> Je pekné, že vás tu mám</AlertDescription> 'absolútny' top='6px' vpravo ='6px' onClick={close}/>
</Alert>
exportpredvolená App
Tento blok kódu riadi stav zobrazenia upozornení pomocou useState háčik. Nastaví počiatočný stav zobrazenia upozornení na „žiadny“, čím sa upozornenie skryje.
Keď používateľ klikne na Tlačidlo, volá sa oznámiť funkciu. Volaním funkcie upozorniť sa zmení hodnota displej stav od „žiadne“ po „flex.“, čím sa upozornenie zviditeľní.
Keď používateľ klikne na tlačidlo zavrieť, volá funkciu close. Zmení stav displeja späť na „žiadny“, čím sa upozornenie skryje.
Teraz môžete vytvárať prispôsobiteľné upozornenia
Teraz ste sa naučili, ako vytvoriť vlastné upozornenie v aplikácii React pomocou používateľského rozhrania Chakra. S Chakra UI je vytváranie vlastných upozornení v Reacte jednoduché a intuitívne, čo nám umožňuje poskytovať našim používateľom jasné a stručné informácie. Chakra UI poskytuje mnoho ďalších prispôsobiteľných a prístupných UI komponentov, ktoré vám pomôžu vytvárať skvelé aplikácie React.