Tworzenie wyskakujących okienek, alertów i toastów za pomocą Blueprint UI w React

Blueprint UI to popularny zestaw narzędzi React UI, który zapewnia zestaw komponentów i stylów wielokrotnego użytku do budowania nowoczesnych aplikacji internetowych. Jedną z kluczowych funkcji Blueprint UI jest obsługa tworzenia wyskakujących okienek, alertów i toastów, które są niezbędnymi składnikami do wyświetlania informacji i opinii użytkownikom.

Instalowanie interfejsu Blueprint

Aby rozpocząć korzystanie z Blueprint UI, musisz go najpierw zainstalować. Możesz to zrobić za pomocą dowolnego wybranego menedżera pakietów.

Aby zainstalować go za pomocą npm, menedżer pakietów JavaScript, uruchom następujące polecenie w swoim terminalu:

npm zainstaluj @blueprintjs/core

Po zainstalowaniu Blueprint UI musisz zaimportować pliki CSS z biblioteki:

@import„normalizuj.css”;
@import"@blueprintjs/core/lib/css/blueprint.css";
@import"@blueprintjs/icons/lib/css/blueprint-icons.css";

Importując te pliki, będziesz mógł zintegrować style Blueprint UI z komponentami, które oferuje Blueprint UI.

Tworzenie wyskakujących okienek za pomocą Blueprint UI

Popover to podpowiedzi, które pojawiają się, gdy użytkownik najedzie kursorem na element lub go kliknie. Zapewniają użytkownikowi dodatkowe informacje lub opcje.

Aby tworzyć wyskakujące okienka w aplikacji React za pomocą Blueprint UI, musisz zainstalować Blueprint UI Popover2 część.

Aby to zrobić, uruchom następujący kod w swoim terminalu:

npm install --save @blueprintjs/popover2

Pamiętaj, aby zaimportować arkusz stylów pakietu do pliku CSS:

@import"@blueprintjs/popover2/lib/css/blueprint-popover2.css";

Po zaimportowaniu arkusza stylów możesz użyć pliku Popover2 komponent do tworzenia popoverów w Twojej aplikacji.

Na przykład:

import Reagować z"reagować";
import { Przycisk } z"@blueprintjs/rdzeń";
import { Popover2 } z"@blueprintjs/popover2";
funkcjonowaćAplikacja() {
konst popoverContent = (



Tytuł Popover</h3>


To jest zawartość wewnątrz wyskakującego okienka.</p>
 </div>
 );
powrót (




"powodzenie" tekst="Kliknij" />
 </Popover2>
 </div>
 );
}

eksportdomyślny Aplikacja;

Ten kod tworzy popover przy użyciu Popover2 część. Określa również A popover Zawartość zmienna, która zawiera kod JSX dla zawartości popover.

The Popover2 składnik bierze popover Zawartość jako wartość jego treść rekwizyt. The treść prop określa zawartość wyświetlaną w oknie popover. Tutaj Popover2 okłady składnika a Przycisk część. Powoduje to wyświetlenie okna podręcznego po kliknięciu przycisku.

Popover wygląda prosto, jak pokazano tutaj:

Możesz stylizować zawartość popover, przekazując a Nazwa klasy podpora do popover Zawartość Kod JSX:

konst popoverContent = (
„wyskakujące okienko”>
Tytuł Popover</h3>


To jest zawartość wewnątrz wyskakującego okienka.</p>
 </div>
);

Następnie możesz zdefiniować klasę CSS w swoim pliku CSS:

.popover {
wyściółka: 1Rem;
kolor tła: #e2e2e2;
rodzina czcionek: kursywny;
}

Teraz popover powinien wyglądać trochę lepiej:

The Popover2 komponent ma kilka rekwizytów, które pomogą Ci skonfigurować go zgodnie z Twoimi potrzebami. Niektóre z tych rekwizytów są popoverNazwaKlasy, onInterakcja, jest otwarte, minimalny, I umieszczenie.

The umieszczenie prop określa preferowaną pozycję popover względem elementu docelowego. Jego dostępne wartości to:

• automatyczny
• automatyczny start
• automatyczne zakończenie
• szczyt
• start z góry
• Górny koniec
• spód
• dolny start
• dolny koniec
• Prawidłowy
• prawy początek
• prawy koniec
• lewy
• lewy start
• lewy koniec

z popoverNazwaKlasy, możesz zdefiniować nazwę klasy CSS dla elementu popover. Najpierw utworzysz klasę CSS w swoim pliku CSS, aby użyć rekwizytu.

Na przykład:

.custom-popover {
kolor tła: #e2e2e2;
pudełko-cień: 0 10piks 15piks-3 piksrgb(0 0 0 / 0.1);
promień granicy: 12piks;
wyściółka: 1Rem;
}

Po utworzeniu klasy CSS użyj metody popoverNazwaKlasy prop, aby zastosować niestandardowy styl do komponentu Popover2:

 zawartość={popoverContent}
 miejsce docelowe=„dolny koniec”
 popoverNazwaKlasy=„niestandardowe okno dialogowe”
 minimalna={PRAWDA}
>
"powodzenie" tekst="Kliknij" />
</Popover2>

The minimalny prop kontroluje styl popover. Podpórka przyjmuje wartość logiczną. Jeśli ustawione na true, popover będzie miał minimalną stylizację, nie będzie miał strzałki i będzie miał prosty wygląd pudełka.

Tworzenie alertów

Alerty to powiadomienia pojawiające się na ekranie w celu poinformowania użytkownika o ważnych informacjach lub działaniach. Są one powszechnie używane do wyświetlania komunikatów o błędach, komunikatów o powodzeniu lub ostrzeżeń.

Tworzenie alertów w Blueprint UI jest podobne do tworzenie alertów za pomocą Chakra UI. Użyjesz komponentu Alert do utworzenia alertu w swojej aplikacji React za pomocą Blueprint UI.

Oto przykład:

import Reagować z"reagować";
import { Uwaga, przycisk } z"@blueprintjs/rdzeń";
funkcjonowaćAplikacja() {
konst [isOpen, setIsOpen] = React.useState(FAŁSZ);
konst uchwytOtwórz = () => {
 setIsOpen(PRAWDA);
 };
konst uchwytZamknij = () => {
 setIsOpen(FAŁSZ);
 };
powrót (



"Zamknąć">
To jest wiadomość ostrzegawcza</p>
 </Alert>
"Kliknij" zamiar ="powodzenie" onClick={uchwytOpen} />
 </div>
 );
}
eksportdomyślny Aplikacja;

Ten przykład pokazuje, jak należy zaimportować plik Alarm składnik z @blueprintjs/core pakiet. The Alarm składnik renderuje komunikat ostrzegawczy na ekranie. Wymaga również trzech rekwizytów: jest otwarte, onZamknij, I potwierdźTekst przycisku.

The jest otwarte prop określa, czy alert jest widoczny, czy nie. Ustaw wartość true, aby wyświetlić alert, lub false, aby go ukryć. The onZamknij prop to funkcja wywołania zwrotnego, która jest uruchamiana, gdy użytkownik zamknie alert.

Wreszcie, potwierdźTekst przycisku prop określa tekst wyświetlany na przycisku potwierdzenia.

Powiadomienie o alercie w tym przykładzie będzie wyglądać następująco:

Tworzenie toastów za pomocą Blueprint UI

Grzanki to powiadomienia pojawiające się na ekranie w celu poinformowania użytkownika o ważnych informacjach lub zdarzeniach. Są podobne do alertów, ale zazwyczaj są mniej uciążliwe i szybko znikają.

Aby utworzyć toast w aplikacji React za pomocą Blueprint UI, użyj Toster nakładki część. The Toster nakładki tworzy instancję Toaster, która jest następnie używana do tworzenia indywidualnych tostów.

Na przykład:

import Reagować z"reagować";
import { Nakładka Toster, Przycisk } z"@blueprintjs/rdzeń";
konst toasterInstance = OverlayToaster.create({ pozycja: "w prawym górnym rogu" });
funkcjonowaćAplikacja() {
konst pokaż Tosty = () => {
 toasterInstance.show({
 wiadomość: „To jest toast”,
 zamiar: "podstawowy",
 koniec czasu: 3000,
 isCloseButtonPokazano: FAŁSZ,
 Ikona: "zakładka",
 });
 };
powrót (



"Kliknij" zamiar ="powodzenie" onClick={showToast} />
 </div>
 );
}
eksportdomyślny Aplikacja;

Powyższy blok kodu wykorzystuje OverlayToaster.create metodę generowania instancji tostera i określa jej pozycję za pomocą metody pozycja rekwizyt.

Określa również funkcję pokażTosty. Ta funkcja wykorzystuje tzw pokazywać metoda tzw tosterInstancja aby wyświetlić toast po wywołaniu. The pokazywać metoda pobiera obiekt z wiadomość, zamiar, koniec czasu, jestPokazany Przycisk Zamknij, I Ikona rekwizyty.

The wiadomość prop określa zawartość tekstową toastu, podczas gdy zamiar prop określa typ toastu. Styl tostu będzie się różnić w zależności od jego wartości.

Możesz kontrolować, jak długo wyświetla się wyskakujące powiadomienie za pomocą koniec czasu rekwizyt. The Ikona prop określa element ikony do wyświetlenia w toaście. z jestPokazany Przycisk Zamknij prop możesz kontrolować, czy przycisk zamykania ma być wyświetlany w wyskakującym okienku.

Powyższy blok kodu wygeneruje piękny toast po kliknięciu przycisku, jak widać na poniższym obrazku.

Jeśli chcesz stworzyć atrakcyjne powiadomienia wyskakujące w swojej aplikacji React, Blueprint UI jest świetną opcją. Zapewnia szeroką gamę predefiniowanych komponentów, których można użyć do tworzenia powiadomień pasujących do stylu aplikacji.

Jeśli jednak pracujesz nad małym projektem, który nie wymaga wszystkich funkcji Blueprint UI, React Toastify to lekka alternatywa dla tworzenia pięknych powiadomień.

Poprawa doświadczenia użytkownika dzięki wyskakującym okienkom, popoverom i alertom

Nauczyłeś się, jak tworzyć wyskakujące okienka, alerty i wyskakujące toasty w aplikacji React za pomocą Blueprint UI. Te komponenty są niezbędne do dostarczania informacji i opinii użytkownikom i mogą znacznie poprawić komfort użytkowania aplikacji. Możesz łatwo tworzyć te komponenty, korzystając z uzyskanych informacji przy minimalnym wysiłku i dostosowaniu.