Erhalten Sie mit dieser Bibliothek konsistente, attraktive Benachrichtigungen auf Ihrer gesamten React-Site.
Warnungen sind Meldungen, die auf einer Website/Webanwendung angezeigt werden, um einem Benutzer wichtige Informationen zu übermitteln. Sie spielen eine entscheidende Rolle in Webanwendungen. Es gibt viele Möglichkeiten, Benachrichtigungen in React zu erstellen; Chakra UI macht den Prozess einfach und effizient.
Chakra UI ist eine beliebte Komponentenbibliothek für React, die eine Reihe anpassbarer und zugänglicher UI-Komponenten bereitstellt.
Installation der Chakra-Benutzeroberfläche
Um die Chakra-UI-Bibliothek zu verwenden, eine von vielen Reaktionskomponentenbibliotheken, müssen Sie es zuerst installieren. Sie können es installieren, indem Sie den folgenden Terminalbefehl im Verzeichnis Ihres node.js-Projekts ausführen:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
Alternativ können Sie Chakra UI mit Yarn installieren. Führen Sie dazu den folgenden Befehl aus:
Garn füge @chakra-ui/react @emotion/react @emotion/styled framer-motion hinzu
Einrichten der Chakra-Benutzeroberfläche
Nach der Installation von Chakra UI müssen Sie es in Ihrer Anwendung verfügbar machen. Dazu müssen Sie die einrichten ChakraProvider Komponente.
Der ChakraProvider Die Komponente ist eine Komponente der obersten Ebene, die von der Chakra-UI-Bibliothek bereitgestellt wird. Es umschließt die gesamte Anwendung und stellt das Thema und den Gestaltungskontext für alle ihre Komponenten bereit.
Zum Einrichten der ChakraProvider Komponente, importieren Sie sie aus @chakra-ui/reagieren:
importieren Reagieren aus'reagieren'
importieren ReactDOM aus'react-dom/client'
importieren App aus'./App'
importieren { ChakraProvider } aus'@chakra-ui/reagieren'
ReactDOM.createRoot(dokumentieren.getElementById('Wurzel') als HTMLElement).render(
</ChakraProvider>
</React.StrictMode>
)
Der ChakraProvider Komponente unterstützt a Thema Stütze. Vorbei an der Thema stütze auf die ChakraProvider -Komponente stellt sicher, dass alle Chakra-UI-Komponenten in der Anwendung auf das bereitgestellte Design und den bereitgestellten Stilkontext zugreifen können. Der Thema Requisite ist optional; Wenn Sie es nicht bestehen, verwendet die Chakra-Benutzeroberfläche ein Standarddesign.
Erstellen einer benutzerdefinierten Warnung mithilfe von Warnungskomponenten
Chakra UI bietet vier Komponenten, mit denen Sie eine benutzerdefinierte Warnung erstellen können: Alarm, AlertIcon, AlertTitle, Und AlertDescription.
Um Ihre Warnmeldung zu erstellen, importieren Sie diese Komponenten aus der Chakra-UI-Bibliothek und verwenden Sie sie wie folgt:
importieren Reagieren aus'reagieren';
importieren {Alert, AlertIcon, AlertDescription, AlertTitle} aus'@chakra-ui/reagieren'FunktionApp() {
zurückkehren ('Erfolg'> Willkommen!!!</AlertTitle> Es ist schön, dich hier zu haben</AlertDescription>
</Alert>
</div>
)
}
ExportStandard App
Nach dem Importieren der Komponenten wird die Alarm Die Komponente zeigt dem Benutzer eine Nachricht an. Es hat ein Status prop auf „success“ gesetzt, was anzeigt, dass die Nachricht eine Erfolgsnachricht ist.
Es gibt drei weitere Status: „Info“, „Fehler“ und „Warnung“. Das Farbschema und das Symbol, das die Warnung verwendet, hängen vom Nachrichtenstatus ab.
Der Alarm Komponente enthält drei Kinder: AlertIcon, AlertTitle, Und AlertDescription. Der AlertIcon Komponente zeigt ein kleines Symbol neben der Nachricht an, AlertTitle zeigt die Hauptmeldung an, und AlertDescription zeigt eine ausführlichere Beschreibung der Nachricht an.
Der vorherige Codeblock generiert eine Warnung, die wie folgt aussieht:
Anpassen von Warnmeldungen mit der Variant Prop
Um das Erscheinungsbild der Warnmeldung anzupassen, verwenden Sie die Variante Stütze der Alarm Komponente. Der Variante prop definiert das visuelle Erscheinungsbild der Warnmeldung und bestimmt das Farbschema, das Symbol und die Schriftstärke der Meldung basierend auf dem übergebenen Wert.
Der Variante prop akzeptiert mehrere Zeichenfolgenwerte wie z subtil, solide, linker Akzent, Top-Akzent, Rechter Akzent, Und unterer Akzent. Jeder Wert repräsentiert einen anderen visuellen Stil der Warnmeldung.
Hier ein Beispiel für vier Alert-Komponenten mit unterschiedlichen Varianten:
importieren Reagieren aus'reagieren';
importieren {Alert, AlertIcon, AlertDescription, AlertTitle, Flex} aus'@chakra-ui/reagieren'FunktionApp() {
zurückkehren ('Center' Lücke ='3' Richtung ='Spalte' mt='4'> 'Erfolg' Variante='solide'> Willkommen!!!</AlertTitle> Es ist schön, dich hier zu haben</AlertDescription>
</Alert>
'Erfolg' Variante='subtil'> Willkommen!!!</AlertTitle> Es ist schön, dich hier zu haben</AlertDescription>
</Alert>
'Erfolg' Variante='Top-Akzent'> Willkommen!!!</AlertTitle> Es ist schön, dich hier zu haben</AlertDescription>
</Alert>
'Erfolg' Variante='linker Akzent'> Willkommen!!!</AlertTitle> Es ist schön, dich hier zu haben</AlertDescription>
</Alert>
</Flex>
</div>
)
}
ExportStandard App
Beim Rendern des obigen Codeblocks wird eine benutzerdefinierte Warnung wie diese angezeigt:
Anpassen Ihrer Warnmeldungen mit der Eigenschaft className
Anstatt beim standardmäßigen Erscheinungsbild der Warnmeldungen zu bleiben, können Sie es mithilfe von anpassen Klassenname Stütze. Sie verwenden die Klassenname prop, um eine CSS-Klasse zu definieren und Ihren benutzerdefinierten Stil auf die Warnmeldung anzuwenden.
Zum Beispiel:
importieren Reagieren aus'reagieren';
importieren {Alert, AlertIcon, AlertDescription, AlertTitle} aus'@chakra-ui/reagieren'FunktionApp() {
zurückkehren ('Erfolg' Klassenname='Alarm'> Willkommen!!!</AlertTitle> Es ist schön, dich hier zu haben</AlertDescription>
</Alert>
</div>
)
}
ExportStandard Anwendung;
In diesem Beispiel hat die Alert-Komponente eine CSS-Klasse „alert“. Nachdem Sie die CSS-Klasse definiert haben, können Sie Ihre Stile in Ihrer CSS-Datei definieren.
So:
.Alarm {
Farbe Rot;
Schriftfamilie: kursiv;
Anzeige: Flex;
Biegerichtung: Säule;
Lücke: 0.4rem;
}
Der obige Code wendet die CSS-Stile auf die Warnkomponente an. Wenn Sie mit Requisiten im Chakra-UI-Stil vertraut sind, sollten Sie sie verwenden, um Warnmeldungen anstelle von zu gestalten Klassenname Stütze.
Nach dem Anwenden der obigen CSS-Stile wird die Warnkomponente wie in der Abbildung unten angezeigt:
Auslösen von Warnmeldungen als Reaktion auf Benutzerereignisse
Sie haben eine Alert-Komponente erstellt, die konsistent eine Alert-Meldung auf dem Bildschirm anzeigt. Um die Benutzererfahrung zu verbessern, können Sie die Warnmeldung jedoch als Reaktion auf bestimmte Ereignisse auslösen, die ein Benutzer initiiert, Verwenden von JavaScript-Ereignis-Listenern. Diese Ereignisse können das Klicken auf eine Schaltfläche, das Absenden eines Formulars oder das Auftreten eines Fehlers umfassen.
Um Ihre Warnmeldung als Reaktion auf Ereignisse auszulösen, verwenden Sie den Reaktionsstatus und die Anzeige Requisite der Chakra-UI-Komponenten.
Zum Beispiel:
importieren Reagieren aus'reagieren';
importieren {Alert, AlertIcon, AlertDescription, AlertTitle, Button, CloseButton} aus'@chakra-ui/reagieren'FunktionApp() {
konst [display, setDisplay] = React.useState('keiner');Funktionbenachrichtigen() {
setDisplay('biegen');
}Funktionschließen() {
setDisplay('keiner');
}zurückkehren (
"App">'Erfolg' display={display}variante='solide'> Willkommen!!!</AlertTitle> Es ist schön, dich hier zu haben</AlertDescription> 'absolut' oben='6px' richtig ='6px' onClick={close}/>
</Alert>
ExportStandard App
Dieser Codeblock verwaltet den Status der Benachrichtigungsanzeige mit der useState Haken. Es setzt den Anfangszustand der Benachrichtigungsanzeige auf „none“, wodurch die Benachrichtigung ausgeblendet wird.
Wenn der Benutzer auf die klickt Taste, nennt es die benachrichtigen Funktion. Das Aufrufen der Notify-Funktion ändert den Wert der Anzeige von „none“ auf „flex.“ ändern, wodurch die Benachrichtigung sichtbar wird.
Wenn der Benutzer auf die klickt schließenSchaltfläche, ruft es die close-Funktion auf. Es ändert den Status der Anzeige zurück auf „none“, wodurch die Benachrichtigung ausgeblendet wird.
Jetzt können Sie anpassbare Benachrichtigungen erstellen
Jetzt haben Sie gelernt, wie Sie mit der Chakra-Benutzeroberfläche eine benutzerdefinierte Benachrichtigung in Ihrer React-Anwendung erstellen. Mit der Chakra-Benutzeroberfläche ist das Erstellen benutzerdefinierter Benachrichtigungen in React einfach und intuitiv, sodass wir unseren Benutzern klare und präzise Informationen bereitstellen können. Chakra UI bietet viele andere anpassbare und zugängliche UI-Komponenten, mit denen Sie großartige React-Anwendungen erstellen können.
