Enkle, rene UI-elementer kan friske opp designet ditt og gi et snev av kvalitet til nettstedet eller appen din.

Blueprint UI er et populært React UI-verktøysett som gir et sett med gjenbrukbare komponenter og stiler for å bygge moderne webapplikasjoner. En av nøkkelfunksjonene til Blueprint UI er støtten for å lage popovers, varsler og toasts, som er viktige komponenter for å vise informasjon og tilbakemeldinger til brukere.

Installerer Blueprint UI

For å komme i gang med Blueprint UI, må du installere det først. Du kan gjøre dette ved å bruke hvilken som helst pakkebehandling du ønsker.

For å installere den ved hjelp av npm, JavaScript-pakkebehandleren, kjør følgende kommando i terminalen din:

npm installer @blueprintjs/core

Etter å ha installert Blueprint UI, må du importere CSS-filene fra biblioteket:

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

Ved å importere disse filene vil du kunne integrere Blueprint UI-stilene med komponentene Blueprint UI tilbyr.

instagram viewer

Opprette popovers ved hjelp av Blueprint UI

Popovers er verktøytips som vises når brukeren holder markøren over eller klikker på et element. De gir tilleggsinformasjon eller alternativer til brukeren.

For å lage popovers i React-applikasjonen din ved å bruke Blueprint UI, må du installere Blueprint UI Popover2 komponent.

For å gjøre dette, kjør følgende kode i terminalen din:

npm install --lagre @blueprintjs/popover2

Sørg for å importere pakkestilarket til CSS-filen din:

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

Etter å ha importert stilarket, kan du bruke Popover2 komponent for å lage popovers i applikasjonen din.

For eksempel:

import Reagere fra"reagere";
import { Knapp } fra"@blueprintjs/core";
import { Popover2 } fra"@blueprintjs/popover2";
funksjonApp() {
konst popoverContent = (




Popover-tittel</h3>




Dette er innholdet i popoveren.</p>
 </div>
 );


komme tilbake (









eksportmisligholde App;

Denne koden lager en popover ved å bruke Popover2 komponent. Den definerer også en popover innhold variabel, som inneholder JSX-koden for popover-innholdet.

De Popover2 komponent tar popover innhold som verdien av dens innhold rekvisitt. De innhold prop spesifiserer innholdet som vises i popover-vinduet. Her, den Popover2 komponent omslag a Knapp komponent. Dette får popover til å vises når du klikker på knappen.

Popoveren ser enkel ut, som vist her:

Du kan style popover-innholdet ved å sende en klassenavn støtte til popover innhold JSX-kode:

konst popoverContent = (
'stikke innom'>
Popover-tittel</h3>




Dette er innholdet i popoveren.</p>
 </div>
);

Du kan deretter definere CSS-klassen i CSS-filen din:

.stikke innom {
polstring: 1rem;
bakgrunnsfarge: #e2e2e2;
font-familie: kursiv;
}

Nå skal popoveren se litt bedre ut:

De Popover2 komponent tar noen rekvisitter som vil hjelpe deg å konfigurere den til å passe dine behov. Noen av disse rekvisittene er popoverClassName, på Interaksjon, er åpen, minimal, og plassering.

De plassering prop bestemmer den foretrukne posisjonen til popover i forhold til målelementet. Dens tilgjengelige verdier er:

  • auto
  • Auto Start
  • automatisk slutt
  • topp
  • toppstart
  • topp-enden
  • bunn
  • bunn-start
  • bunnen
  • Ikke sant
  • høyre-start
  • høyre ende
  • venstre
  • venstre-start
  • venstre ende

Med popoverClassName, kan du definere et CSS-klassenavn for popover-elementet. Du vil først opprette en CSS-klasse i CSS-filen din for å bruke rekvisitten.

For eksempel:

.custom-popover {
bakgrunnsfarge: #e2e2e2;
boks-skygge: 0 10px 15px-3 pxrgb(0 0 0 / 0.1);
grense-radius: 12px;
polstring: 1rem;
}

Etter å ha opprettet CSS-klassen, bruk popoverClassName prop for å bruke den tilpassede stilen på Popover2-komponenten:

 content={popoverContent}
 plassering="bunnenden"
 popoverClassName="egendefinert popover"
 minimal={ekte}
>

De minimal prop kontrollerer stylingen av popoveren. Rekvisitten godtar en boolsk verdi. Hvis satt til sann, vil popover-en ha minimal stil, ingen pil og et enkelt boksutseende.

Opprette varsler

Varsler er varsler som vises på skjermen for å informere brukeren om viktig informasjon eller handlinger. De brukes ofte til å vise feilmeldinger, suksessmeldinger eller advarsler.

Å lage varsler i Blueprint UI ligner på lage varsler ved hjelp av Chakra UI. Du vil bruke Alert-komponenten til å opprette et varsel i React-applikasjonen din ved å bruke Blueprint UI.

Her er et eksempel:

import Reagere fra"reagere";
import { Varsel, knapp } fra"@blueprintjs/core";
funksjonApp() {
konst [isOpen, setIsOpen] = React.useState(falsk);


konst håndtakOpen = () => {
 setIsOpen(ekte);
 };


konst handleClose = () => {
 setIsOpen(falsk);
 };


komme tilbake (




"Lukk">
Dette er en varselmelding</p>
 </Alert>




eksportmisligholde App;

Dette eksemplet viser hvordan du må importere Varsling komponent fra @blueprintjs/core pakke. De Varsling komponent gjengir en varselmelding på skjermen. Det krever også tre rekvisitter: er åpen, på Lukk, og confirmButtonText.

De er åpen prop avgjør om varselet er synlig eller ikke. Sett den til sann for å vise varselet og false for å skjule den. De på Lukk prop er en tilbakeringingsfunksjon som kjører når en bruker lukker varselet.

Til slutt, den confirmButtonText prop bestemmer teksten som vises på bekreftelsesknappen.

Varslingsvarselet i dette eksemplet vil se slik ut:

Lage skåler med Blueprint UI

Toasts er varsler som vises på skjermen for å informere brukeren om viktig informasjon eller hendelser. De ligner på varsler, men er vanligvis mindre påtrengende og forsvinner raskt.

For å lage en skål i React-applikasjonen din ved å bruke Blueprint UI, bruk OverlayToaster komponent. De OverlayToaster komponenten oppretter en Toaster-forekomst som deretter brukes til å lage individuelle toasts.

For eksempel:

import Reagere fra"reagere";
import { OverlayToaster, knapp } fra"@blueprintjs/core";
konst toasterInstance = OverlayToaster.create({ posisjon: "øverst til høyre" });


funksjonApp() {
konst showToast = () => {
 toasterInstance.show({
 beskjed: "Dette er en skål",
 hensikt: "hoved",
 pause: 3000,
 isCloseButtonShown: falsk,
 ikon: "bokmerke",
 });
 };


komme tilbake (






eksportmisligholde App;

Kodeblokken ovenfor bruker OverlayToaster.create metode for å generere brødristerforekomsten og spesifisere posisjonen ved hjelp av posisjon rekvisitt.

Den definerer også funksjonen showToast. Denne funksjonen bruker forestilling metoden for toasterInstance for å vise toast når du ringer. De forestilling metoden tar et objekt med beskjed, hensikt, pause, erCloseButtonShown, og ikon Rekvisitter.

De beskjed prop spesifiserer tekstinnholdet i toasten, mens hensikt prop spesifiserer typen toast. Stilen på toasten vil variere basert på verdien.

Du kan kontrollere hvor lenge toastvarslingen vises ved å bruke pause rekvisitt. De ikon prop spesifiserer et ikonelement som skal vises i toasten. Med erCloseButtonShown prop, kan du kontrollere om lukkeknappen vises i toasten.

Kodeblokken ovenfor vil generere en vakker skål når du klikker på knappen, som vist på bildet nedenfor.

Hvis du ønsker å lage attraktive toast-varsler i React-applikasjonen din, er Blueprint UI et flott alternativ. Den gir et bredt utvalg av forhåndsdefinerte komponenter som du kan bruke til å lage varsler som samsvarer med applikasjonens stil.

Men hvis du jobber med et lite prosjekt som ikke krever alle funksjonene til Blueprint UI, React Toastify er et lett alternativ til å lage vakre varsler.

Forbedre brukeropplevelsen med skåler, popovers og varsler

Du har lært hvordan du lager popovers, varsler og skåler i React-applikasjonen din ved å bruke Blueprint UI. Disse komponentene er avgjørende for å gi informasjon og tilbakemeldinger til brukere og kan forbedre brukeropplevelsen av applikasjonen din betraktelig. Du kan enkelt lage disse komponentene ved å bruke informasjonen du har oppnådd med minimal innsats og tilpasning.