Získejte konzistentní a atraktivní upozornění na vašem webu React s touto knihovnou.
Upozornění jsou zprávy zobrazené na webu/webové aplikaci, které uživateli sdělují důležité informace. Hrají zásadní roli ve webových aplikacích. Existuje mnoho způsobů, jak vytvořit upozornění v Reactu; Chakra UI dělá proces snadný a efektivní.
Chakra UI je oblíbená knihovna komponent pro React, která poskytuje sadu přizpůsobitelných a přístupných komponent uživatelského rozhraní.
Instalace uživatelského rozhraní Chakra
Chcete-li používat knihovnu uživatelského rozhraní Chakra, jedna z mnoha knihoven reakčních komponent, musíte jej nejprve nainstalovat. Můžete jej nainstalovat spuštěním následujícího příkazu terminálu v adresáři projektu node.js:
npm i @čakra-ui/reagovat @emoce/reagovat @emoce/stylizovaný framer-motion
Alternativně můžete nainstalovat Chakra UI pomocí Yarn. Chcete-li tak učinit, spusťte následující příkaz:
příze přidat @čakra-ui/reagovat @emoce/reagovat @emoce/stylizovaný framer-motion
Nastavení uživatelského rozhraní Chakra
Po instalaci uživatelského rozhraní Chakra jej musíte zpřístupnit ve své aplikaci. Chcete-li to provést, musíte nastavit ChakraProvider komponent.
The ChakraProvider komponenta je komponenta nejvyšší úrovně, kterou poskytuje knihovna uživatelského rozhraní Chakra. Obaluje celou aplikaci a poskytuje kontext tématu a stylu všem jejím součástem.
Chcete-li nastavit ChakraProvider komponent, importujte jej z @čakra-ui/reagovat:
import Reagovat z'reagovat'
import ReactDOM z'react-dom/client'
import Aplikace z'./Aplikace'
import { ChakraProvider } z'@čakra-ui/react'
ReactDOM.createRoot(dokument.getElementById('vykořenit') tak jako HTMLElement).render(
</ChakraProvider>
</React.StrictMode>
)
The ChakraProvider podpěry komponent a téma podpěra. Absolvování téma podpěra k ChakraProvider komponenta zajišťuje, že všechny součásti uživatelského rozhraní Chakra v aplikaci mají přístup k poskytnutému kontextu tématu a stylu. The téma podpěra je volitelná; pokud to neprojdete, Chakra UI použije výchozí motiv.
Vytvoření vlastní výstrahy pomocí komponent výstrah
Uživatelské rozhraní Chakra nabízí čtyři součásti, které vám umožní vytvořit vlastní upozornění: Upozornění, AlertIcon, AlertTitle, a AlertDescription.
Chcete-li vytvořit svou výstražnou zprávu, importujte tyto součásti z knihovny uživatelského rozhraní Chakra a použijte je následovně:
import Reagovat z'reagovat';
import {Alert, AlertIcon, AlertDescription, AlertTitle} z'@čakra-ui/react'funkceAplikace() {
vrátit se ('úspěch'> Vítejte!!!</AlertTitle> Je hezké, že vás tu mám</AlertDescription>
</Alert>
</div>
)
}
vývoznívýchozí Aplikace
Po importu komponent se Upozornění komponenta zobrazí zprávu uživateli. Má to postavení prop nastavena na „úspěch“, což znamená, že zpráva je úspěšnou zprávou.
Existují tři další stavy: „informace“, „chyba“ a „varování“. Barevné schéma a ikona, kterou výstraha používá, bude záviset na stavu zprávy.
The Upozornění komponenta obsahuje tři děti: AlertIcon, AlertTitle, a AlertDescription. The AlertIcon komponenta zobrazí vedle zprávy malou ikonu, AlertTitle zobrazí hlavní zprávu a AlertDescription zobrazí podrobnější popis zprávy.
Předchozí blok kódu vygeneruje výstrahu, která vypadá takto:
Přizpůsobení výstražných zpráv pomocí Variant Prop
Chcete-li upravit vzhled výstražné zprávy, použijte varianta podpěra toho Upozornění komponent. The varianta prop definuje vizuální vzhled výstražné zprávy a určuje barevné schéma, ikonu a tloušťku písma zprávy na základě hodnoty, kterou jí předáte.
The varianta prop přijímá několik řetězcových hodnot, jako je jemný, pevný, levý přízvuk, špičkový přízvuk, pravý přízvuk, a spodní přízvuk. Každá hodnota představuje jiný vizuální styl výstražné zprávy.
Zde je příklad čtyř komponent výstrah s různými variantami:
import Reagovat z'reagovat';
import {Alert, AlertIcon, AlertDescription, AlertTitle, Flex} z'@čakra-ui/react'funkceAplikace() {
vrátit se ('centrum' mezera ='3' směr ='sloupec' mt='4'> 'úspěch' varianta='pevný'> Vítejte!!!</AlertTitle> Je hezké, že vás tu mám</AlertDescription>
</Alert>
'úspěch' varianta='jemný'> Vítejte!!!</AlertTitle> Je hezké, že vás tu mám</AlertDescription>
</Alert>
'úspěch' varianta='top-accent'> Vítejte!!!</AlertTitle> Je hezké, že vás tu mám</AlertDescription>
</Alert>
'úspěch' varianta='levý přízvuk'> Vítejte!!!</AlertTitle> Je hezké, že vás tu mám</AlertDescription>
</Alert>
</Flex>
</div>
)
}
vývoznívýchozí Aplikace
Vykreslením výše uvedeného bloku kódu se zobrazí vlastní upozornění, jako je toto:
Přizpůsobení vašich výstražných zpráv pomocí className Prop
Namísto toho, abyste se drželi výchozího vzhledu výstražných zpráv, si jej můžete přizpůsobit pomocí jméno třídy podpěra. Používáte jméno třídy prop k definování třídy CSS a použití vlastního stylu na výstražnou zprávu.
Například:
import Reagovat z'reagovat';
import {Alert, AlertIcon, AlertDescription, AlertTitle} z'@čakra-ui/react'funkceAplikace() {
vrátit se ('úspěch' className='pozor'> Vítejte!!!</AlertTitle> Je hezké, že vás tu mám</AlertDescription>
</Alert>
</div>
)
}
vývoznívýchozí Aplikace;
V tomto příkladu má komponenta výstrahy CSS třídu „alert“. Po definování třídy CSS můžete definovat své styly v souboru CSS.
Jako tak:
.alert {
červená barva;
font-family: cursive;
displej: flex;
směr ohybu: sloupec;
mezera: 0.4rem;
}
Výše uvedený kód použije styly CSS na komponentu výstrahy. Pokud jste obeznámeni s rekvizitami ve stylu uživatelského rozhraní Chakra, měli byste je použít ke stylování výstražných zpráv místo jméno třídy podpěra.
Po použití výše uvedených stylů CSS se komponenta výstrahy zobrazí, jak je vidět na obrázku níže:
Spouštění výstražných zpráv v reakci na uživatelské události
Vytvořili jste komponentu výstrahy, která trvale zobrazuje výstrahu na obrazovce. Chcete-li však zlepšit uživatelský komfort, můžete spustit výstražnou zprávu v reakci na konkrétní události, které uživatel iniciuje, pomocí JavaScriptových posluchačů událostí. Tyto události mohou zahrnovat kliknutí na tlačítko, odeslání formuláře nebo zjištění chyby.
Chcete-li spustit varovnou zprávu v reakci na události, použijte stav Reagovat a Zobrazit podpěra komponent uživatelského rozhraní Chakra.
Například:
import Reagovat z'reagovat';
import {Alert, AlertIcon, AlertDescription, AlertTitle, Button, CloseButton} z'@čakra-ui/react'funkceAplikace() {
konst [display, setDisplay] = React.useState('žádný');funkceoznámit() {
setDisplay('flex');
}funkcezavřít() {
setDisplay('žádný');
}vrátit se (
"aplikace">'úspěch' display={display} varianta='pevný'> Vítejte!!!</AlertTitle> Je hezké, že vás tu mám</AlertDescription> 'absolutní' nahoře ='6px' vpravo ='6px' onClick={close}/>
</Alert>
vývoznívýchozí Aplikace
Tento blok kódu spravuje stav zobrazení oznámení pomocí useState háček. Nastaví počáteční stav zobrazení oznámení na „žádné“, čímž se oznámení skryje.
Když uživatel klikne na Knoflík, to nazývá oznámit funkce. Volání funkce upozornění změní hodnotu Zobrazit stav od „žádný“ po „flex.“, takže oznámení bude viditelné.
Když uživatel klikne na tlačítko zavřít, volá funkci close. Změní stav displeje zpět na „žádný“, čímž se upozornění skryje.
Nyní můžete vytvářet přizpůsobitelná upozornění
Nyní jste se naučili, jak vytvořit vlastní upozornění v aplikaci React pomocí uživatelského rozhraní Chakra. S Chakra UI je vytváření vlastních upozornění v Reactu snadné a intuitivní, což nám umožňuje poskytovat našim uživatelům jasné a stručné informace. Chakra UI poskytuje mnoho dalších přizpůsobitelných a dostupných komponent uživatelského rozhraní, které vám pomohou vytvářet skvělé aplikace React.