Ontvang met deze bibliotheek consistente, aantrekkelijke waarschuwingen op uw React-site.
Alerts zijn berichten die op een website/webapplicatie worden weergegeven om belangrijke informatie aan een gebruiker over te brengen. Ze spelen een cruciale rol in webapplicaties. Er zijn veel manieren om waarschuwingen te maken in React; Chakra UI maakt het proces eenvoudig en efficiënt.
Chakra UI is een populaire componentenbibliotheek voor React die een reeks aanpasbare en toegankelijke UI-componenten biedt.
Chakra-gebruikersinterface installeren
Om de Chakra UI-bibliotheek te gebruiken, een van de vele reactiecomponentenbibliotheken, moet u deze eerst installeren. U kunt het installeren door de volgende terminalopdracht uit te voeren in de map van uw node.js-project:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
Als alternatief kunt u Chakra UI installeren met Yarn. Voer hiervoor de volgende opdracht uit:
garen toevoegen @chakra-ui/react @emotion/react @emotion/styled framer-motion
Chakra-gebruikersinterface instellen
Na het installeren van Chakra UI, moet u deze beschikbaar maken in uw applicatie. Om dit te doen, moet u de ChakraProvider bestanddeel.
De ChakraProvider component is een component op het hoogste niveau die de Chakra UI-bibliotheek biedt. Het omvat de hele applicatie en biedt de thema- en stylingcontext voor alle componenten.
Om de ChakraProvider component, importeer het van @chakra-ui/reageren:
importeren Reageer van'Reageer'
importeren ReactDOM van'react-dom/klant'
importeren app van'./App'
importeren { ChakraProvider } van'@chakra-ui/reageren'
ReactDOM.createRoot(document.getElementById('wortel') als HTMLElement).render(
</ChakraProvider>
</React.StrictMode>
)
De ChakraProvider onderdeel ondersteunt een thema prop. Het passeren van de thema steun aan de ChakraProvider component zorgt ervoor dat alle Chakra UI-componenten in de applicatie toegang hebben tot de meegeleverde thema- en stylingcontext. De thema prop is optioneel; als je het niet haalt, gebruikt Chakra UI een standaardthema.
Een aangepaste waarschuwing maken met behulp van waarschuwingscomponenten
Chakra UI biedt vier componenten waarmee u een aangepaste waarschuwing kunt maken: Alarm, AlertIcon, AlertTitel, En AlertBeschrijving.
Om uw waarschuwingsbericht te maken, importeert u deze componenten uit de Chakra UI-bibliotheek en gebruikt u ze als volgt:
importeren Reageer van'Reageer';
importeren {Alert, AlertIcon, AlertDescription, AlertTitle} van'@chakra-ui/reageren'functieapp() {
opbrengst ('succes'> Welkom!!!</AlertTitle> Leuk dat je er bent</AlertDescription>
</Alert>
</div>
)
}
exporterenstandaard app
Na het importeren van de componenten, de Alarm component geeft een bericht weer aan de gebruiker. Het heeft een toestand prop ingesteld op "succes", wat aangeeft dat het bericht een succesbericht is.
Er zijn drie andere statussen: 'info', 'fout' en 'waarschuwing'. Het kleurenschema en het pictogram dat de waarschuwing gebruikt, zijn afhankelijk van de berichtstatus.
De Alarm onderdeel bevat drie kinderen: AlertIcon, AlertTitel, En AlertBeschrijving. De AlertIcon component toont een klein pictogram naast het bericht, AlertTitel geeft het hoofdbericht weer, en AlertBeschrijving geeft een meer gedetailleerde beschrijving van het bericht weer.
Het vorige codeblok genereert een waarschuwing die er als volgt uitziet:
Waarschuwingsberichten aanpassen met behulp van de Variant Prop
Om het uiterlijk van het waarschuwingsbericht aan te passen, gebruikt u de variant prop van de Alarm bestanddeel. De variant prop definieert het visuele uiterlijk van het waarschuwingsbericht en bepaalt het kleurenschema, het pictogram en het lettertypegewicht van het bericht op basis van de waarde die u eraan doorgeeft.
De variant prop accepteert verschillende tekenreekswaarden, zoals subtiel, stevig, links-accent, top-accent, rechts-accent, En onderste accent. Elke waarde vertegenwoordigt een andere visuele stijl van het waarschuwingsbericht.
Hier is een voorbeeld van vier waarschuwingscomponenten met verschillende varianten:
importeren Reageer van'Reageer';
importeren {Alert, AlertIcon, AlertDescription, AlertTitle, Flex} van'@chakra-ui/reageren'functieapp() {
opbrengst ('centrum' kloof='3' richting='kolom' mt='4'> 'succes' variant='stevig'> Welkom!!!</AlertTitle> Leuk dat je er bent</AlertDescription>
</Alert>
'succes' variant='subtiel'> Welkom!!!</AlertTitle> Leuk dat je er bent</AlertDescription>
</Alert>
'succes' variant='top-accent'> Welkom!!!</AlertTitle> Leuk dat je er bent</AlertDescription>
</Alert>
'succes' variant='links-accent'> Welkom!!!</AlertTitle> Leuk dat je er bent</AlertDescription>
</Alert>
</Flex>
</div>
)
}
exporterenstandaard app
Als u het bovenstaande codeblok weergeeft, wordt een aangepaste waarschuwing weergegeven zoals deze:
Uw waarschuwingsberichten aanpassen met behulp van de className Prop
In plaats van vast te houden aan het standaard uiterlijk van de waarschuwingsberichten, kunt u deze aanpassen met behulp van de naam van de klasse prop. Je gebruikt de naam van de klasse prop om een CSS-klasse te definiëren en uw aangepaste stijl toe te passen op het waarschuwingsbericht.
Bijvoorbeeld:
importeren Reageer van'Reageer';
importeren {Alert, AlertIcon, AlertDescription, AlertTitle} van'@chakra-ui/reageren'functieapp() {
opbrengst ('succes' classNaam='waarschuwen'> Welkom!!!</AlertTitle> Leuk dat je er bent</AlertDescription>
</Alert>
</div>
)
}
exporterenstandaard App;
In dit voorbeeld heeft de waarschuwingscomponent een CSS-klasse "waarschuwing". Nadat u de CSS-klasse hebt gedefinieerd, kunt u uw stijlen definiëren in uw CSS-bestand.
Zoals zo:
.alert {
kleur rood;
font-familie: cursief;
weergeven: flex;
flex-richting: kolom;
gat: 0.4rem;
}
De bovenstaande code past de CSS-stijlen toe op de waarschuwingscomponent. Als u bekend bent met rekwisieten in Chakra UI-stijl, moet u deze gebruiken om waarschuwingsberichten te stylen in plaats van de naam van de klasse prop.
Na het toepassen van de bovenstaande CSS-stijlen, wordt de waarschuwingscomponent weergegeven zoals te zien is in de onderstaande afbeelding:
Waarschuwingsberichten activeren als reactie op gebruikersgebeurtenissen
U hebt een waarschuwingscomponent gemaakt die consequent een waarschuwingsbericht op het scherm weergeeft. Om de gebruikerservaring te verbeteren, kunt u echter het waarschuwingsbericht activeren als reactie op specifieke gebeurtenissen die een gebruiker initieert, met behulp van JavaScript-gebeurtenisluisteraars. Deze gebeurtenissen kunnen bestaan uit het klikken op een knop, het indienen van een formulier of het optreden van een fout.
Gebruik React state en de om uw waarschuwingsbericht te activeren als reactie op gebeurtenissen weergave prop van de Chakra UI-componenten.
Bijvoorbeeld:
importeren Reageer van'Reageer';
importeren {Alert, AlertIcon, AlertDescription, AlertTitle, Button, CloseButton} van'@chakra-ui/reageren'functieapp() {
const [display, setDisplay] = React.useState('geen');functiemelden() {
setWeergave('buigen');
}functiedichtbij() {
setWeergave('geen');
}opbrengst (
"app">'succes' weergave={weergave} variant='stevig'> Welkom!!!</AlertTitle> Leuk dat je er bent</AlertDescription> 'absoluut' top='6px' juist='6px' onClick={sluiten}/>
</Alert>
exporterenstandaard app
Dit codeblok beheert de status van het meldingsdisplay met de gebruikState haak. Het stelt de beginstatus van de meldingsweergave in op "geen", waardoor de melding wordt verborgen.
Wanneer de gebruiker op de Knop, noemt het de melden functie. Het aanroepen van de meldingsfunctie verandert de waarde van de weergave status van "none" naar "flex.", waardoor de melding zichtbaar wordt.
Wanneer de gebruiker op de closeButton, roept het de close-functie aan. Het verandert de status van het scherm terug naar "geen", wat de melding verbergt.
Nu kunt u aanpasbare waarschuwingen maken
Nu heb je geleerd hoe je een aangepaste waarschuwing kunt maken in je React-applicatie met behulp van Chakra UI. Met Chakra UI is het maken van aangepaste waarschuwingen in React eenvoudig en intuïtief, waardoor we onze gebruikers duidelijke en beknopte informatie kunnen bieden. Chakra UI biedt vele andere aanpasbare en toegankelijke UI-componenten om u te helpen geweldige React-applicaties te bouwen.
