Crearea popovers, alerte și toasts cu Blueprint UI în React

Blueprint UI este un set de instrumente popular React UI care oferă un set de componente și stiluri reutilizabile pentru construirea de aplicații web moderne. Una dintre caracteristicile cheie ale Blueprint UI este suportul pentru crearea de popover, alerte și toasts, care sunt componente esențiale pentru afișarea informațiilor și feedback-ului utilizatorilor.

Instalarea Blueprint UI

Pentru a începe cu Blueprint UI, va trebui să îl instalați mai întâi. Puteți face acest lucru folosind orice manager de pachete la alegere.

Pentru a-l instala folosind npm, managerul de pachete JavaScript, rulați următoarea comandă în terminalul dvs.:

npm install @blueprintjs/core

După instalarea Blueprint UI, trebuie să importați fișierele CSS din bibliotecă:

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

Importând aceste fișiere, veți putea integra stilurile Blueprint UI cu componentele oferite de Blueprint UI.

Crearea popover-urilor folosind interfața de utilizare Blueprint

Popover-urile sunt sfaturi care apar atunci când utilizatorul trece cu mouse-ul peste sau face clic pe un element. Ele oferă utilizatorului informații sau opțiuni suplimentare.

Pentru a crea popover în aplicația dvs. React folosind Blueprint UI, trebuie să instalați Blueprint UI Popover2 componentă.

Pentru a face acest lucru, rulați următorul cod în terminalul dvs.:

npm install --save @blueprintjs/popover2

Asigurați-vă că importați foaia de stil pachet în fișierul dvs. CSS:

@import„@blueprintjs/popover2/lib/css/blueprint-popover2.css”;

După importarea foii de stil, puteți utiliza Popover2 componentă pentru a crea popovers în aplicația dvs.

De exemplu:

import Reacţiona din"reacţiona";
import { Buton } din„@blueprintjs/core”;
import { Popover2 } din„@blueprintjs/popover2”;
funcţieApp() {
const popoverContent = (



Popover Titlu</h3>


Acesta este conținutul din interiorul popoverului.</p>
 </div>
 );
întoarcere (




"succes" text=„Clic pe mine” />
 </Popover2>
 </div>
 );
}

exportMod implicit Aplicație;

Acest cod creează un popover folosind Popover2 componentă. De asemenea, definește a popoverContent variabilă, care conține codul JSX pentru conținutul popover.

The Popover2 componenta ia popoverContent ca valoare a acestuia conţinut recuzită. The conţinut prop specifică conținutul afișat în popover. Aici Popover2 împachetări componente a Buton componentă. Acest lucru face ca popover să se afișeze atunci când faceți clic pe buton.

Popover-ul pare simplu, așa cum se arată aici:

Puteți stila conținutul popover prin trecerea a numele clasei prop la popoverContent Cod JSX:

const popoverContent = (
'popover'>
Popover Titlu</h3>


Acesta este conținutul din interiorul popoverului.</p>
 </div>
);

Apoi puteți defini clasa CSS în fișierul dvs. CSS:

.popover {
căptușeală: 1rem;
culoare de fundal: #e2e2e2;
familie de fonturi: cursiv;
}

Acum popover-ul ar trebui să arate puțin mai bine:

The Popover2 componenta necesită câteva elemente de recuzită care vă vor ajuta să o configurați pentru a se potrivi nevoilor dvs. Unele dintre aceste elemente de recuzită sunt popoverClassName, onInteraction, este deschis, minim, și plasare.

The plasare prop determină poziția preferată a popover-ului față de elementul țintă. Valorile sale disponibile sunt:

• auto
• pornire automată
• terminare automată
• top
• top-start
• top-end
• fund
• de jos-început
• capătul de jos
• dreapta
• pornire dreapta
• capătul drept
• stânga
• stânga-start
• capătul din stânga

Cu popoverClassName, puteți defini un nume de clasă CSS pentru elementul popover. Mai întâi veți crea o clasă CSS în fișierul dvs. CSS pentru a utiliza prop.

De exemplu:

.personalizat-popover {
culoare de fundal: #e2e2e2;
cutie-umbră: 0 10px 15px-3pxrgb(0 0 0 / 0.1);
hotar-raza: 12px;
căptușeală: 1rem;
}

După crearea clasei CSS, utilizați popoverClassName prop pentru a aplica stilul personalizat la componenta Popover2:

 content={popoverContent}
 plasare="capătul de jos"
 popoverClassName="popover personalizat"
 minim={Adevărat}
>
"succes" text=„Clic pe mine” />
</Popover2>

The minim prop controlează stilul popover-ului. Prop acceptă o valoare booleană. Dacă este setat la adevărat, popover-ul va avea un stil minim, fără săgeată și un aspect simplu de casetă.

Crearea alertelor

Alertele sunt notificări care apar pe ecran pentru a informa utilizatorul despre informații sau acțiuni importante. Ele sunt utilizate în mod obișnuit pentru a afișa mesaje de eroare, mesaje de succes sau avertismente.

Crearea alertelor în Blueprint UI este similară cu crearea de alerte folosind Chakra UI. Veți folosi componenta Alert pentru a crea o alertă în aplicația dvs. React folosind Blueprint UI.

Iată un exemplu:

import Reacţiona din"reacţiona";
import { Alert, Button } din„@blueprintjs/core”;
funcţieApp() {
const [isOpen, setIsOpen] = React.useState(fals);
const handleOpen = () => {
 setIsOpen(Adevărat);
 };
const handleClose = () => {
 setIsOpen(fals);
 };
întoarcere (



"Închide">
Acesta este un mesaj de alertă</p>
 </Alert>
„Clic pe mine” intentie="succes" onClick={handleOpen} />
 </div>
 );
}
exportMod implicit Aplicație;

Acest exemplu arată cum trebuie să importați fișierul Alerta componentă din @blueprintjs/core pachet. The Alerta componenta redă un mesaj de alertă pe ecran. Este nevoie și de trei elemente de recuzită: este deschis, onClose, și confirmButtonText.

The este deschis prop determină dacă alerta este vizibilă sau nu. Setați-l la true pentru a afișa alerta și la false pentru a o ascunde. The onClose prop este o funcție de apel invers care rulează atunci când un utilizator închide alerta.

În cele din urmă, confirmButtonText prop determină textul afișat pe butonul de confirmare.

Notificarea de alertă din acest exemplu va arăta astfel:

Crearea de toasts cu interfața de utilizare Blueprint

Toasturile sunt notificări care apar pe ecran pentru a informa utilizatorul despre informații sau evenimente importante. Sunt similare cu alertele, dar sunt de obicei mai puțin intruzive și dispar rapid.

Pentru a crea un toast în aplicația React folosind Blueprint UI, utilizați OverlayToaster componentă. The OverlayToaster componenta creează o instanță Toaster care este apoi folosită pentru a crea toasturi individuale.

De exemplu:

import Reacţiona din"reacţiona";
import { OverlayToaster, Button } din„@blueprintjs/core”;
const toasterInstance = OverlayToaster.create({ poziţie: "sus în dreapta" });
funcţieApp() {
const showToast = () => {
 toasterInstance.show({
 mesaj: „Acesta este un toast”,
 intentie: "primar",
 pauză: 3000,
 isCloseButtonShown: fals,
 pictograma: "marcaj",
 });
 };
întoarcere (



„Clic pe mine” intentie="succes" onClick={showToast} />
 </div>
 );
}
exportMod implicit Aplicație;

Blocul de cod de mai sus folosește OverlayToaster.create metoda de generare a instanței de pâine de pâine și specifică poziția acesteia folosind poziţie recuzită.

De asemenea, definește funcția showToast. Această funcție folosește spectacol metoda de prăjitor de pâineInstanță pentru a afișa toast atunci când este sunat. The spectacol metoda preia un obiect cu mesaj, intentie, pauză, esteCloseButtonShown, și pictograma recuzită.

The mesaj prop specifică conținutul text al toastului, în timp ce intentie recuzita specifică tipul de pâine prăjită. Stilul de pâine prăjită va varia în funcție de valoarea sa.

Puteți controla cât timp se afișează notificarea de toast folosind pauză recuzită. The pictograma prop specifică un element pictogramă de afișat în toast. Cu esteCloseButtonShown prop, puteți controla dacă butonul de închidere se afișează în toast.

Blocul de cod de mai sus va genera un toast frumos când faceți clic pe buton, așa cum se vede în imaginea de mai jos.

Dacă doriți să creați notificări atractive toast în aplicația dvs. React, Blueprint UI este o opțiune excelentă. Acesta oferă o gamă largă de componente predefinite pe care le puteți utiliza pentru a crea notificări care se potrivesc cu stilul aplicației dvs.

Cu toate acestea, dacă lucrați la un proiect mic care nu necesită toate funcțiile Blueprint UI, React Toastify este o alternativă ușoară pentru a crea notificări frumoase.

Îmbunătățirea experienței utilizatorului cu toasts, popovers și alerte

Ați învățat cum să creați popovers, alerte și toasts în aplicația dvs. React folosind Blueprint UI. Aceste componente sunt esențiale pentru furnizarea de informații și feedback utilizatorilor și pot îmbunătăți semnificativ experiența utilizatorului aplicației dumneavoastră. Puteți crea cu ușurință aceste componente folosind informațiile pe care le-ați obținut cu efort și personalizare minime.