Få konsekventa, attraktiva varningar på din React-webbplats med detta bibliotek.
Varningar är meddelanden som visas på en webbplats/webbapplikation för att förmedla viktig information till en användare. De spelar en avgörande roll i webbapplikationer. Det finns många sätt att skapa varningar i React; Chakra UI gör processen enkel och effektiv.
Chakra UI är ett populärt komponentbibliotek för React som tillhandahåller en uppsättning anpassningsbara och tillgängliga UI-komponenter.
Installera Chakra UI
För att använda Chakra UI-biblioteket, ett av många reagera komponentbibliotek, måste du först installera den. Du kan installera det genom att köra följande terminalkommando i ditt node.js-projekts katalog:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
Alternativt kan du installera Chakra UI med Yarn. För att göra det, kör följande kommando:
garn lägg till @chakra-ui/react @emotion/react @emotion/styled framer-motion
Konfigurera Chakra UI
Efter att ha installerat Chakra UI måste du göra det tillgängligt i din applikation. För att göra detta måste du ställa in
ChakraProvider komponent.De ChakraProvider komponent är en toppnivåkomponent som Chakra UI-biblioteket tillhandahåller. Den omsluter hela applikationen och ger temat och stilkontexten till alla dess komponenter.
För att ställa in ChakraProvider komponent, importera den från @chakra-ui/reagera:
importera Reagera från'reagera'
importera ReactDOM från'reagera-dom/klient'
importera App från'./App'
importera { ChakraProvider } från'@chakra-ui/reagera'
ReactDOM.createRoot(dokumentera.getElementById('rot') som HTMLElement).render(
</ChakraProvider>
</React.StrictMode>
)
De ChakraProvider komponent stöder en tema stötta. Passerar tema stötta till ChakraProvider komponent säkerställer att alla Chakra UI-komponenter i applikationen kan komma åt det angivna temat och stilkontexten. De tema prop är valfritt; om du inte klarar det kommer Chakra UI att använda ett standardtema.
Skapa en anpassad varning med hjälp av varningskomponenter
Chakra UI erbjuder fyra komponenter som låter dig skapa en anpassad varning: Varna, AlertIcon, AlertTitle, och AlertDescription.
För att skapa ditt varningsmeddelande, importera dessa komponenter från Chakra UI-biblioteket och använd dem enligt följande:
importera Reagera från'reagera';
importera {Alert, AlertIcon, AlertDescription, AlertTitle} från'@chakra-ui/reagera'fungeraApp() {
lämna tillbaka ('Framgång'> Välkommen!!!</AlertTitle> Det är trevligt att ha dig här</AlertDescription>
</Alert>
</div>
)
}
exporterastandard App
Efter att ha importerat komponenterna, Varna komponent visar ett meddelande till användaren. Den har en status prop satt till "framgång", vilket indikerar att meddelandet är ett framgångsmeddelande.
Det finns tre andra statusar: "info", "fel" och "varning". Färgschemat och ikonen som varningen använder beror på meddelandestatus.
De Varna komponenten innehåller tre barn: AlertIcon, AlertTitle, och AlertDescription. De AlertIcon komponent visar en liten ikon bredvid meddelandet, AlertTitle visar huvudmeddelandet och AlertDescription visar en mer detaljerad beskrivning av meddelandet.
Det föregående kodblocket genererar en varning som ser ut så här:
Anpassa varningsmeddelanden med hjälp av Variant Prop
För att anpassa utseendet på varningsmeddelandet, använd variant rekvisita av Varna komponent. De variant prop definierar det visuella utseendet på varningsmeddelandet och bestämmer färgschemat, ikonen och teckensnittsvikten för meddelandet baserat på värdet du skickar till det.
De variant prop accepterar flera strängvärden som t.ex subtil, fast, vänster-accent, topp-accent, höger-accent, och botten-accent. Varje värde representerar en annan visuell stil för varningsmeddelandet.
Här är ett exempel på fyra varningskomponenter med olika varianter:
importera Reagera från'reagera';
importera {Alert, AlertIcon, AlertDescription, AlertTitle, Flex} från'@chakra-ui/reagera'fungeraApp() {
lämna tillbaka ('Centrum' gap='3' riktning='kolumn' mt='4'> 'Framgång' variant='fast'> Välkommen!!!</AlertTitle> Det är trevligt att ha dig här</AlertDescription>
</Alert>
'Framgång' variant='subtil'> Välkommen!!!</AlertTitle> Det är trevligt att ha dig här</AlertDescription>
</Alert>
'Framgång' variant="top-accent"> Välkommen!!!</AlertTitle> Det är trevligt att ha dig här</AlertDescription>
</Alert>
'Framgång' variant="vänster-accent"> Välkommen!!!</AlertTitle> Det är trevligt att ha dig här</AlertDescription>
</Alert>
</Flex>
</div>
)
}
exporterastandard App
Om du renderar kodblocket ovan visas en anpassad varning så här:
Anpassa dina varningsmeddelanden med klassnamn Prop
Istället för att hålla fast vid standardutseendet på varningsmeddelandena kan du anpassa det med hjälp av klassnamn stötta. Du använder klassnamn prop för att definiera en CSS-klass och tillämpa din anpassade stil på varningsmeddelandet.
Till exempel:
importera Reagera från'reagera';
importera {Alert, AlertIcon, AlertDescription, AlertTitle} från'@chakra-ui/reagera'fungeraApp() {
lämna tillbaka ('Framgång' klassnamn='varna'> Välkommen!!!</AlertTitle> Det är trevligt att ha dig här</AlertDescription>
</Alert>
</div>
)
}
exporterastandard App;
I det här exemplet har varningskomponenten en CSS-klass "alert". Efter att ha definierat CSS-klassen kan du definiera dina stilar i din CSS-fil.
Såhär:
.varna {
färgen röd;
font-family: kursiv;
display: flex;
flex-riktning: kolumn;
glipa: 0.4rem;
}
Koden ovan kommer att tillämpa CSS-stilarna på varningskomponenten. Om du är bekant med rekvisita i Chakra UI-stil, bör du använda dem för att utforma varningsmeddelanden istället för klassnamn stötta.
Efter att ha tillämpat CSS-stilarna ovan kommer varningskomponenten att visas som på bilden nedan:
Utlöser varningsmeddelanden som svar på användarhändelser
Du har skapat en varningskomponent som konsekvent visar ett varningsmeddelande på skärmen. Men för att förbättra användarupplevelsen kan du utlösa varningsmeddelandet som svar på specifika händelser som en användare initierar, använder JavaScript-händelselyssnare. Dessa händelser kan innefatta att klicka på en knapp, skicka ett formulär eller stöta på ett fel.
För att utlösa ditt varningsmeddelande som svar på händelser, använd React state och visa prop för Chakra UI-komponenterna.
Till exempel:
importera Reagera från'reagera';
importera {Alert, AlertIcon, AlertDescription, AlertTitle, Button, CloseButton} från'@chakra-ui/reagera'fungeraApp() {
konst [display, setDisplay] = React.useState('ingen');fungerameddela() {
setDisplay('böja');
}fungerastänga() {
setDisplay('ingen');
}lämna tillbaka (
"app">'Framgång' display={display} variant='fast'> Välkommen!!!</AlertTitle> Det är trevligt att ha dig här</AlertDescription> 'absolut' topp='6px' höger='6px' onClick={close}/>
</Alert>
exporterastandard App
Detta kodblock hanterar tillståndet för meddelandevisningen med useState krok. Den ställer in det initiala tillståndet för meddelandevisningen till "ingen", vilket döljer meddelandet.
När användaren klickar på Knapp, kallar det meddela fungera. Att anropa meddelandefunktionen ändrar värdet på visa ange från "ingen" till "flex", vilket gör aviseringen synlig.
När användaren klickar på stängknapp, kallar den stängningsfunktionen. Det ändrar tillståndet på skärmen tillbaka till "ingen" vilket döljer meddelandet.
Nu kan du skapa anpassningsbara varningar
Nu har du lärt dig hur du skapar en anpassad varning i din React-applikation med Chakra UI. Med Chakra UI är det enkelt och intuitivt att skapa anpassade varningar i React, vilket gör att vi kan tillhandahålla tydlig och koncis information till våra användare. Chakra UI tillhandahåller många andra anpassningsbara och tillgängliga UI-komponenter som hjälper dig att bygga fantastiska React-applikationer.