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.
Cuprins
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 popovers 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-uri în aplicația dvs. React folosind Blueprint UI, trebuie să instalați componenta Blueprint UI Popover2.
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 componenta Popover2 pentru a crea popover în aplicația dvs.
De exemplu:
import React from "react";
import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";function App() {
const popoverContent = (
<div>
<h3>Popover Title</h3>
<p>This is the content inside the popover.</p>
</div>
);return (
<div>
<Popover2 content={popoverContent}>
<Button intent="success" text="Click Me" />
</Popover2>
</div>
);
}export default App;
Acest cod creează un popover folosind componenta Popover2. De asemenea, definește o variabilă popoverContent, care conține codul JSX pentru conținutul popover.
Componenta Popover2 ia popoverContent ca valoare a propului său de conținut. Propul de conținut specifică conținutul afișat în popover. Aici, componenta Popover2 include o componentă Button. 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 trecând o prop className codului JSX popoverContent:
const popoverContent = (
<div className="popover">
<h3>Popover Title</h3>
<p>This is the content inside the popover.</p>
</div>
);
Apoi puteți defini clasa CSS în fișierul dvs. CSS:
.popover {
padding: 1rem;
background-color: #e2e2e2;
font-family: cursive;
}
Acum popover-ul ar trebui să arate puțin mai bine:
Componenta Popover2 are câteva elemente de recuzită care vă vor ajuta să o configurați în funcție de nevoile dvs. Unele dintre aceste elemente de recuzită sunt popoverClassName, onInteraction, isOpen, minimal și placement.
Elementul de plasare 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:
.custom-popover {
background-color: #e2e2e2;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
border-radius: 12px;
padding: 1rem;
}
După crearea clasei CSS, utilizați prop popoverClassName pentru a aplica stilul personalizat la componenta Popover2:
<Popover2
content={popoverContent}
placement="bottom-end"
popoverClassName="custom-popover"
minimal={true}
>
<Button intent="success" text="Click Me" />
</Popover2>
Elementul de recuzită minim 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 alertelor 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 React from "react";
import { Alert, Button } from "@blueprintjs/core";function App() {
const [isOpen, setIsOpen] = React.useState(false);const handleOpen = () => {
setIsOpen(true);
};const handleClose = () => {
setIsOpen(false);
};return (
<div>
<Alert isOpen={isOpen} onClose={handleClose} confirmButtonText="Close">
<p>This is an alert message</p>
</Alert><Button text="Click Me" intent="success" onClick={handleOpen} />
</div>
);
}export default App;
Acest exemplu arată cum trebuie să importați componenta Alert din pachetul @blueprintjs/core. Componenta Alertă redă un mesaj de alertă pe ecran. Este nevoie, de asemenea, de trei elemente de recuzită: isOpen, onClose și confirmButtonText.
Elementul de sprijin isOpen determină dacă alerta este vizibilă sau nu. Setați-l la true pentru a afișa alerta și la false pentru a o ascunde. Propul onClose este o funcție de apel invers care rulează atunci când un utilizator închide alerta.
În cele din urmă, elementul confirmButtonText determină textul afișat pe butonul de confirmare.
Notificarea de alertă din acest exemplu va arăta astfel:
Crearea de Toasts cu Blueprint UI
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 componenta OverlayToaster. Componenta OverlayToaster creează o instanță Toaster care este apoi folosită pentru a crea toasturi individuale.
De exemplu:
import React from "react";
import { OverlayToaster, Button } from "@blueprintjs/core";const toasterInstance = OverlayToaster.create({ position: "top-right" });
function App() {
const showToast = () => {
toasterInstance.show({
message: "This is a toast",
intent: "primary",
timeout: 3000,
isCloseButtonShown: false,
icon: "bookmark",
});
};return (
<div>
<Button text="Click Me" intent="success" onClick={showToast} />
</div>
);
}export default App;
Blocul de cod de mai sus utilizează metoda OverlayToaster.create pentru a genera instanța de pâine de pâine și specifică poziția acesteia folosind propul de poziție.
De asemenea, definește funcția showToast. Această funcție folosește metoda show a toasterInstance pentru a afișa toast-ul atunci când este apelată. Metoda show preia un obiect cu mesaj, intenție, timeout, isCloseButtonShown și elemente de recuzită pentru pictograme.
Propul mesajului specifică conținutul text al toastului, în timp ce propul intenției specifică tipul de toast. Stilul de pâine prăjită va varia în funcție de valoarea sa.
Puteți controla cât de mult timp se afișează notificarea de pâine prăjită utilizând prop timeout. Elementul de sprijin pentru pictogramă specifică un element de pictogramă de afișat în toast. Cu ajutorul elementului isCloseButtonShown, 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 caracteristicile 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.