Bygg popovers, varsler og skåler med Blueprint UI i React

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 å bruke npm, JavaScript-pakkebehandleren, kjør følgende kommando i terminalen din:

 npm install @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.

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-komponenten.

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

 npm install --save @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-komponenten til å lage popovers i applikasjonen din.

For eksempel:

 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;

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

  Hvordan fikse Microsoft Store-feil 0x80073CFB

Popover2-komponenten tar popoverContent som verdien av innholdsrekvisitten. Innholdsrekvisitten spesifiserer innholdet som vises i popoveren. Her omslutter Popover2-komponenten en Button-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 className-propp til popoverContent JSX-koden:

 const popoverContent = (
  <div className="popover">
    <h3>Popover Title</h3>
    <p>This is the content inside the popover.</p>
  </div>
);

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

 .popover {
  padding: 1rem;
  background-color: #e2e2e2;
  font-family: cursive;
}

Nå skal popoveren se litt bedre ut:

Popover2-komponenten tar noen rekvisitter som vil hjelpe deg å konfigurere den for å passe dine behov. Noen av disse rekvisittene er popoverClassName, onInteraction, isOpen, minimal og plassering.

Plasseringsstøtten bestemmer den foretrukne posisjonen til popoveren i forhold til målelementet. Dens tilgjengelige verdier er:

  • auto
  • Auto Start
  • automatisk slutt
  • topp
  • topp-start
  • 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 {
  background-color: #e2e2e2;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  border-radius: 12px;
  padding: 1rem;
}

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

 <Popover2
content={popoverContent}
placement="bottom-end"
popoverClassName="custom-popover"
minimal={true}
>
<Button intent="success" text="Click Me" />
</Popover2>

Den minimale rekvisitten styrer stylingen av popoveren. Rekvisitten godtar en boolsk verdi. Hvis satt til sann, vil popover-en ha minimal stil, ingen pil og et enkelt boksutseende.

  Hvordan skjuler jeg Amazon-bestillinger fra andre familiemedlemmer

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 å bruke Chakra UI. Du vil bruke Alert-komponenten til å opprette et varsel i React-applikasjonen din ved å bruke Blueprint UI.

Her er et eksempel:

 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;

Dette eksemplet viser hvordan du må importere Alert-komponenten fra @blueprintjs/core-pakken. Varslingskomponenten gjengir en varselmelding på skjermen. Det krever også tre rekvisitter: isOpen, onClose og confirmButtonText.

isOpen-rekvisitten bestemmer om varselet er synlig eller ikke. Sett den til sann for å vise varselet og false for å skjule den. OnClose prop er en tilbakeringingsfunksjon som kjører når en bruker lukker varselet.

Til slutt bestemmer bekreftButtonText-proppet 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-komponenten. OverlayToaster-komponenten lager en Toaster-forekomst som deretter brukes til å lage individuelle toasts.

  Sjekk om listen er tom i Python med disse 3 enkle teknikkene

For eksempel:

 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;

Kodeblokken ovenfor bruker OverlayToaster.create-metoden for å generere brødristerforekomsten og spesifiserer dens posisjon ved hjelp av posisjonsstøtten.

Den definerer også funksjonen showToast. Denne funksjonen bruker showmetoden til toasterInstance for å vise toast når den kalles. Vis-metoden tar et objekt med melding, hensikt, tidsavbrudd, isCloseButtonShown og ikonrekvisitter.

Meldingsrekvisitten spesifiserer tekstinnholdet i toast, mens intent prop spesifiserer typen toast. Stilen på toasten vil variere basert på verdien.

Du kan kontrollere hvor lenge toastvarslingen vises ved å bruke tidsavbruddsstøtten. Ikonet spesifiserer et ikonelement som skal vises i toasten. Med isCloseButtonShown-rekvisitten 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, er React Toastify 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.