Enkle, rene UI-elementer kan friske dit design op og tilføje et strejf af kvalitet til din hjemmeside eller app.
Blueprint UI er et populært React UI-værktøjssæt, der giver et sæt genanvendelige komponenter og stilarter til at bygge moderne webapplikationer. En af nøglefunktionerne i Blueprint UI er dens støtte til at skabe popovers, advarsler og toasts, som er væsentlige komponenter til at vise information og feedback til brugerne.
Installation af Blueprint UI
For at komme i gang med Blueprint UI skal du først installere det. Du kan gøre dette ved at bruge en hvilken som helst pakkeadministrator efter eget valg.
For at installere det ved hjælp af npm, JavaScript-pakkemanageren, kør følgende kommando i din terminal:
npm installer @blueprintjs/core
Efter installation af Blueprint UI skal du importere CSS-filerne fra biblioteket:
@importere"normalize.css";
@importere"@blueprintjs/core/lib/css/blueprint.css";
@importere"@blueprintjs/icons/lib/css/blueprint-icons.css";
Ved at importere disse filer vil du være i stand til at integrere Blueprint UI-stilene med de komponenter, Blueprint UI tilbyder.
Oprettelse af popovers ved hjælp af Blueprint UI
Popovers er værktøjstip, der vises, når brugeren svæver over eller klikker på et element. De giver brugeren yderligere oplysninger eller muligheder.
For at oprette popovers i din React-applikation ved hjælp af Blueprint UI, skal du installere Blueprint UI Popover 2 komponent.
For at gøre dette skal du køre følgende kode i din terminal:
npm install --gem @blueprintjs/popover2
Sørg for at importere pakkestilarket i din CSS-fil:
@importere"@blueprintjs/popover2/lib/css/blueprint-popover2.css";
Efter import af typografiarket kan du bruge Popover 2 komponent til at oprette popovers i din applikation.
For eksempel:
importere Reagere fra"reagere";
importere { Knap } fra"@blueprintjs/core";
importere { Popover2 } fra"@blueprintjs/popover2";fungereApp() {
konst popoverContent = (Popover titel</h3>
Dette er indholdet i popoveren.</p>
</div>
);Vend tilbage (
eksportStandard App;
Denne kode opretter en popover ved hjælp af Popover 2 komponent. Det definerer også en popoverindhold variabel, som indeholder JSX-koden for popover-indholdet.
Det Popover 2 komponent tager popoverindhold som værdien af dens indhold rekvisit. Det indhold prop angiver indholdet, der vises i popoveren. Her, den Popover 2 komponentomslag a Knap komponent. Dette får popover til at blive vist, når du klikker på knappen.
Popoveren ser enkel ud, som vist her:
Du kan style popover-indholdet ved at sende en klassenavn støtte til popoverindhold JSX kode:
konst popoverContent = (
'popover'>
Popover titel</h3>
Dette er indholdet i popoveren.</p>
</div>
);
Du kan derefter definere CSS-klassen i din CSS-fil:
.popover {
polstring: 1rem;
baggrundsfarve: #e2e2e2;
skrifttype-familie: kursiv;
}
Nu skulle popoveren se lidt bedre ud:
Det Popover 2 komponent tager nogle rekvisitter, der vil hjælpe dig med at konfigurere den, så den passer til dine behov. Nogle af disse rekvisitter er popoverClassName, på Interaktion, er åben, minimal, og placering.
Det placering prop bestemmer den foretrukne placering af popover i forhold til målelementet. Dens tilgængelige værdier er:
- auto
- automatisk start
- automatisk afslutning
- top
- top-start
- øverste ende
- bund
- bund-start
- bunden
- højre
- højre-start
- højre ende
- venstre
- venstre-start
- venstre ende
Med popoverClassName, kan du definere et CSS-klassenavn for popover-elementet. Du skal først oprette en CSS-klasse i din CSS-fil for at bruge prop.
For eksempel:
.custom-popover {
baggrundsfarve: #e2e2e2;
kasse-skygge: 0 10px 15px-3 pxrgb(0 0 0 / 0.1);
grænse-radius: 12px;
polstring: 1rem;
}
Når du har oprettet CSS-klassen, skal du bruge popoverClassName prop for at anvende den brugerdefinerede stil på Popover2-komponenten:
content={popoverContent}
placering="bund-ende"
popoverClassName="brugerdefineret popover"
minimal={rigtigt}
>
Det minimal prop styrer stilingen af popoveren. Rekvisitteren accepterer en boolesk værdi. Hvis den er sat til sand, vil popoveren have minimal stil, ingen pil og et simpelt boksudseende.
Oprettelse af advarsler
Advarsler er meddelelser, der vises på skærmen for at informere brugeren om vigtige oplysninger eller handlinger. De bruges almindeligvis til at vise fejlmeddelelser, succesmeddelelser eller advarsler.
Oprettelse af advarsler i Blueprint UI ligner oprettelse af alarmer ved hjælp af Chakra UI. Du skal bruge Alert-komponenten til at oprette en advarsel i din React-applikation ved hjælp af Blueprint UI.
Her er et eksempel:
importere Reagere fra"reagere";
importere { Advarsel, knap } fra"@blueprintjs/core";fungereApp() {
konst [isOpen, setIsOpen] = React.useState(falsk);konst håndtag Åben = () => {
sætIsOpen(rigtigt);
};konst handleLuk = () => {
sætIsOpen(falsk);
};Vend tilbage (
"Tæt"> Dette er en advarselsmeddelelse</p>
</Alert>
eksportStandard App;
Dette eksempel viser, hvordan du skal importere Alert komponent fra @blueprintjs/core pakke. Det Alert komponent gengiver en advarselsmeddelelse på skærmen. Det kræver også tre rekvisitter: er åben, på Luk, og bekræft ButtonText.
Det er åben prop bestemmer, om advarslen er synlig eller ej. Indstil den til sand for at vise advarslen og false for at skjule den. Det på Luk prop er en tilbagekaldsfunktion, der kører, når en bruger lukker alarmen.
Til sidst bekræft ButtonText prop bestemmer den tekst, der vises på bekræftelsesknappen.
Advarselsmeddelelsen i dette eksempel vil se sådan ud:
Oprettelse af toasts med Blueprint UI
Toasts er meddelelser, der vises på skærmen for at informere brugeren om vigtige oplysninger eller begivenheder. De ligner alarmer, men er typisk mindre påtrængende og forsvinder hurtigt.
For at lave en skål i din React-applikation ved hjælp af Blueprint UI, skal du bruge OverlayToaster komponent. Det OverlayToaster komponent opretter en Toaster-instans, der derefter bruges til at oprette individuelle toasts.
For eksempel:
importere Reagere fra"reagere";
importere { OverlayToaster, knap } fra"@blueprintjs/core";konst toasterInstance = OverlayToaster.create({ position: "øverst til højre" });
fungereApp() {
konst showToast = () => {
toasterInstance.show({
besked: "Dette er en skål",
hensigt: "primær",
tiden er gået: 3000,
isCloseButtonShown: falsk,
ikon: "bogmærke",
});
};Vend tilbage (
eksportStandard App;
Kodeblokken ovenfor bruger OverlayToaster.create metode til at generere brødristerens instans og specificerer dens position ved hjælp af position rekvisit.
Det definerer også funktionen showToast. Denne funktion bruger at vise metoden til toasterInstance for at vise skålen, når den kaldes. Det at vise metode tager et objekt med besked, hensigt, tiden er gået, erCloseButtonShown, og ikon rekvisitter.
Det besked prop angiver tekstindholdet i toastet, mens hensigt prop angiver typen af toast. Stilen på toasten vil variere baseret på dens værdi.
Du kan styre, hvor længe toast-meddelelsen vises ved hjælp af tiden er gået rekvisit. Det ikon prop angiver et ikonelement, der skal vises i toasten. Med erCloseButtonShown prop, kan du kontrollere, om lukkeknappen vises i toasten.
Kodeblokken ovenfor genererer en smuk skål, når du klikker på knappen, som det ses på billedet nedenfor.
Hvis du ønsker at skabe attraktive toast-notifikationer i din React-applikation, er Blueprint UI en fantastisk mulighed. Det giver en bred vifte af foruddefinerede komponenter, som du kan bruge til at oprette meddelelser, der matcher din applikations stil.
Men hvis du arbejder på et lille projekt, der ikke kræver alle Blueprint UI's funktioner, React Toastify er et letvægtsalternativ til at skabe smukke notifikationer.
Forbedring af brugeroplevelsen med Toasts, Popovers og Alerts
Du har lært, hvordan du opretter popovers, advarsler og toasts i din React-applikation ved hjælp af Blueprint UI. Disse komponenter er essentielle for at give information og feedback til brugerne og kan forbedre brugeroplevelsen af din applikation markant. Du kan nemt oprette disse komponenter ved hjælp af de oplysninger, du har opnået, med minimal indsats og tilpasning.