Erstellen Sie Popovers, Warnungen und Toasts mit der Blueprint-Benutzeroberfläche in React

Blueprint UI ist ein beliebtes React UI-Toolkit, das eine Reihe wiederverwendbarer Komponenten und Stile zum Erstellen moderner Webanwendungen bereitstellt. Eine der Hauptfunktionen von Blueprint UI ist die Unterstützung für die Erstellung von Popovers, Warnungen und Toasts, die wesentliche Komponenten für die Anzeige von Informationen und Feedback für Benutzer sind.

Installieren der Blueprint-Benutzeroberfläche

Um mit Blueprint UI zu beginnen, müssen Sie es zuerst installieren. Sie können dies mit einem beliebigen Paketmanager Ihrer Wahl tun.

Um es zu installieren, verwenden Sie npm, der JavaScript-Paketmanager, Führen Sie den folgenden Befehl in Ihrem Terminal aus:

npm install @blueprintjs/core

Nach der Installation von Blueprint UI müssen Sie die CSS-Dateien aus der Bibliothek importieren:

@importieren„normalisieren.css“;
@importieren„@blueprintjs/core/lib/css/blueprint.css“;
@importieren„@blueprintjs/icons/lib/css/blueprint-icons.css“;

Durch den Import dieser Dateien können Sie die Blueprint-UI-Stile in die von Blueprint UI angebotenen Komponenten integrieren.

Erstellen von Popovers mithilfe der Blueprint-Benutzeroberfläche

Popovers sind Tooltips, die angezeigt werden, wenn der Benutzer mit der Maus über ein Element fährt oder darauf klickt. Sie bieten dem Benutzer zusätzliche Informationen oder Optionen.

Um Popovers in Ihrer React-Anwendung mithilfe der Blueprint-Benutzeroberfläche zu erstellen, müssen Sie die Blueprint-Benutzeroberfläche installieren Popover2 Komponente.

Führen Sie dazu den folgenden Code in Ihrem Terminal aus:

npm install --save @blueprintjs/popover2

Stellen Sie sicher, dass Sie das Paket-Stylesheet in Ihre CSS-Datei importieren:

@importieren„@blueprintjs/popover2/lib/css/blueprint-popover2.css“;

Nach dem Importieren des Stylesheets können Sie das verwenden Popover2 Komponente zum Erstellen von Popovers in Ihrer Anwendung.

Zum Beispiel:

importieren Reagieren aus"reagieren";
importieren { Taste } aus„@blueprintjs/core“;
importieren { Popover2 } aus„@blueprintjs/popover2“;
FunktionApp() {
const popoverContent = (



Popover-Titel</h3>


Dies ist der Inhalt im Popover.</p>
 </div>
 );
zurückkehren (




"Erfolg" text="Klick mich" />
 </Popover2>
 </div>
 );
}

ExportStandard App;

Dieser Code erstellt ein Popover mit Popover2 Komponente. Es definiert auch a popoverContent Variable, die den JSX-Code für den Popover-Inhalt enthält.

Der Popover2 Komponente übernimmt die popoverContent als der Wert seiner Inhalt Stütze. Der Inhalt prop gibt den im Popover angezeigten Inhalt an. Hier das Popover2 Komponente umschließt a Taste Komponente. Dadurch wird das Popover angezeigt, wenn Sie auf die Schaltfläche klicken.

Das Popover sieht einfach aus, wie hier gezeigt:

Sie können den Popover-Inhalt formatieren, indem Sie a übergeben Klassenname Stütze zum popoverContent JSX-Code:

const popoverContent = (
'Popover'>
Popover-Titel</h3>


Dies ist der Inhalt im Popover.</p>
 </div>
);

Anschließend können Sie die CSS-Klasse in Ihrer CSS-Datei definieren:

.popover {
Polsterung: 1rem;
Hintergrundfarbe: #e2e2e2;
Schriftfamilie: kursiv;
}

Jetzt sollte das Popover etwas besser aussehen:

Der Popover2 Die Komponente benötigt einige Requisiten, die Ihnen dabei helfen, sie entsprechend Ihren Anforderungen zu konfigurieren. Einige dieser Requisiten sind popoverClassName, onInteraction, ist offen, minimal, Und Platzierung.

Der Platzierung prop bestimmt die bevorzugte Position des Popovers relativ zum Zielelement. Die verfügbaren Werte sind:

• Auto
• Auto-Start
• automatisches Ende
• Spitze
• Top-Start
• das obere Ende
• Unterseite
• Bottom-Start
• unteres Ende
• Rechts
• Rechtsanfang
• rechtes Ende
• links
• Linksstart
• linkes Ende

Mit dem popoverClassNamekönnen Sie einen CSS-Klassennamen für das Popover-Element definieren. Sie erstellen zunächst eine CSS-Klasse in Ihrer CSS-Datei, um die Requisite zu verwenden.

Zum Beispiel:

.custom-popover {
Hintergrundfarbe: #e2e2e2;
Box Schatten: 0 10px 15px-3pxRGB(0 0 0 / 0.1);
Grenzradius: 12px;
Polsterung: 1rem;
}

Verwenden Sie nach dem Erstellen der CSS-Klasse die popoverClassName prop, um den benutzerdefinierten Stil auf die Popover2-Komponente anzuwenden:

 content={popoverContent}
 Platzierung=„unten“
 popoverClassName=„Custom-Popover“
 minimal={WAHR}
>
"Erfolg" text="Klick mich" />
</Popover2>

Der minimal prop steuert den Stil des Popovers. Die Requisite akzeptiert einen booleschen Wert. Wenn der Wert auf „true“ gesetzt ist, hat das Popover ein minimales Design, keinen Pfeil und ein einfaches Box-Erscheinungsbild.

Benachrichtigungen erstellen

Warnungen sind Benachrichtigungen, die auf dem Bildschirm angezeigt werden, um den Benutzer über wichtige Informationen oder Aktionen zu informieren. Sie werden häufig zur Anzeige von Fehlermeldungen, Erfolgsmeldungen oder Warnungen verwendet.

Das Erstellen von Warnungen in der Blueprint-Benutzeroberfläche ähnelt Erstellen von Warnungen mithilfe der Chakra-Benutzeroberfläche. Sie verwenden die Alert-Komponente, um mithilfe der Blueprint-Benutzeroberfläche eine Warnung in Ihrer React-Anwendung zu erstellen.

Hier ist ein Beispiel:

importieren Reagieren aus"reagieren";
importieren { Alarm, Schaltfläche } aus„@blueprintjs/core“;
FunktionApp() {
const [isOpen, setIsOpen] = React.useState(FALSCH);
const handleOpen = () => {
 setIsOpen(WAHR);
 };
const handleClose = () => {
 setIsOpen(FALSCH);
 };
zurückkehren (



"Schließen">
Dies ist eine Warnmeldung</p>
 </Alert>
"Klick mich" Absicht="Erfolg" onClick={handleOpen} />
 </div>
 );
}
ExportStandard App;

Dieses Beispiel zeigt, wie Sie das importieren müssen Alarm Komponente aus dem @blueprintjs/core Paket. Der Alarm Die Komponente gibt eine Warnmeldung auf dem Bildschirm aus. Es braucht auch drei Requisiten: ist offen, onClose, Und bestätigenButtonText.

Der ist offen prop bestimmt, ob die Warnung sichtbar ist oder nicht. Legen Sie den Wert auf „true“ fest, um die Warnung anzuzeigen, und auf „false“, um sie auszublenden. Der onClose prop ist eine Rückruffunktion, die ausgeführt wird, wenn ein Benutzer die Warnung schließt.

Schließlich die bestätigenButtonText prop bestimmt den Text, der auf der Bestätigungsschaltfläche angezeigt wird.

Die Warnmeldung in diesem Beispiel sieht folgendermaßen aus:

Erstellen von Toasts mit der Blueprint-Benutzeroberfläche

Toasts sind Benachrichtigungen, die auf dem Bildschirm erscheinen, um den Benutzer über wichtige Informationen oder Ereignisse zu informieren. Sie ähneln Warnungen, sind jedoch in der Regel weniger aufdringlich und verschwinden schnell.

Um einen Toast in Ihrer React-Anwendung mithilfe der Blueprint-Benutzeroberfläche zu erstellen, verwenden Sie die OverlayToaster Komponente. Der OverlayToaster Die Komponente erstellt eine Toaster-Instanz, die dann zum Erstellen einzelner Toasts verwendet wird.

Zum Beispiel:

importieren Reagieren aus"reagieren";
importieren { OverlayToaster, Schaltfläche } aus„@blueprintjs/core“;
const toasterInstance = OverlayToaster.create({ Position: "oben rechts" });
FunktionApp() {
const showToast = () => {
 toasterInstance.show({
 Nachricht: „Das ist ein Toast“,
 Absicht: „primär“,
 Auszeit: 3000,
 isCloseButtonShown: FALSCH,
 Symbol: "Lesezeichen",
 });
 };
zurückkehren (



"Klick mich" Absicht="Erfolg" onClick={showToast} />
 </div>
 );
}
ExportStandard App;

Der obige Codeblock verwendet die OverlayToaster.create Methode zum Generieren der Toaster-Instanz und gibt ihre Position mithilfe der an Position Stütze.

Es definiert auch die Funktion ShowToast. Diese Funktion verwendet die zeigen Methode der toasterInstance um den Toast anzuzeigen, wenn er aufgerufen wird. Der zeigen Methode nimmt ein Objekt mit dem Nachricht, Absicht, Auszeit, isCloseButtonShown, Und Symbol Requisiten.

Der Nachricht prop gibt den Textinhalt des Toasts an, während die Absicht prop gibt die Art des Toasts an. Der Stil des Toasts hängt von seinem Wert ab.

Sie können steuern, wie lange die Toastbenachrichtigung angezeigt wird Auszeit Stütze. Der Symbol prop gibt ein Symbolelement an, das im Toast angezeigt werden soll. Mit dem isCloseButtonShown prop können Sie steuern, ob die Schaltfläche „Schließen“ im Toast angezeigt wird.

Der obige Codeblock generiert einen schönen Toast, wenn Sie auf die Schaltfläche klicken, wie im Bild unten zu sehen ist.

Wenn Sie attraktive Toast-Benachrichtigungen in Ihrer React-Anwendung erstellen möchten, ist Blueprint UI eine großartige Option. Es bietet eine breite Palette vordefinierter Komponenten, mit denen Sie Benachrichtigungen erstellen können, die dem Stil Ihrer Anwendung entsprechen.

Wenn Sie jedoch an einem kleinen Projekt arbeiten, das nicht alle Funktionen der Blueprint-Benutzeroberfläche benötigt, React Toastify ist eine leichte Alternative zum Erstellen schöner Benachrichtigungen.

Verbessern Sie die Benutzererfahrung mit Toasts, Popovers und Warnungen

Sie haben gelernt, wie Sie mithilfe der Blueprint-Benutzeroberfläche Popovers, Warnungen und Toasts in Ihrer React-Anwendung erstellen. Diese Komponenten sind für die Bereitstellung von Informationen und Feedback für Benutzer unerlässlich und können das Benutzererlebnis Ihrer Anwendung erheblich verbessern. Sie können diese Komponenten ganz einfach mit den gewonnenen Informationen und mit minimalem Aufwand und Anpassungen erstellen.