Bygg popovers, varningar och skålar med Blueprint UI i React

Blueprint UI är en populär React UI-verktygssats som tillhandahåller en uppsättning återanvändbara komponenter och stilar för att bygga moderna webbapplikationer. En av nyckelfunktionerna i Blueprint UI är dess stöd för att skapa popovers, varningar och skålar, som är viktiga komponenter för att visa information och feedback till användare.

Installerar Blueprint UI

För att komma igång med Blueprint UI måste du först installera det. Du kan göra detta med valfri pakethanterare.

För att installera det med npm, JavaScript-pakethanteraren, kör följande kommando i din terminal:

 npm install @blueprintjs/core

Efter installation av Blueprint UI måste du importera CSS-filerna från biblioteket:

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

Genom att importera dessa filer kommer du att kunna integrera Blueprint UI-stilarna med de komponenter som Blueprint UI erbjuder.

Skapa popovers med hjälp av Blueprint UI

Popovers är verktygstips som visas när användaren håller muspekaren över eller klickar på ett element. De ger användaren ytterligare information eller alternativ.

För att skapa popovers i din React-applikation med Blueprint UI måste du installera Blueprint UI Popover2-komponenten.

För att göra detta, kör följande kod i din terminal:

 npm install --save @blueprintjs/popover2

Se till att importera paketformatmallen i din CSS-fil:

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

Efter att ha importerat stilmallen kan du använda Popover2-komponenten för att skapa popovers i din applikation.

Till exempel:

 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;

Den här koden skapar en popover med Popover2-komponenten. Den definierar också en popoverContent-variabel, som innehåller JSX-koden för popover-innehållet.

Popover2-komponenten tar popoverContent som värdet av dess innehållsrekvisita. Innehållsrekvisiten anger innehållet som visas i popover-fönstret. Här omsluter Popover2-komponenten en Button-komponent. Detta gör att popover-fönstret visas när du klickar på knappen.

Popover ser enkelt ut, som visas här:

Du kan stila popover-innehållet genom att skicka en className-propp till popoverContent JSX-koden:

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

Du kan sedan definiera CSS-klassen i din CSS-fil:

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

Nu borde popoveren se lite bättre ut:

Popover2-komponenten tar några rekvisita som hjälper dig att konfigurera den för att passa dina behov. Några av dessa rekvisita är popoverClassName, onInteraction, isOpen, minimal och placement.

Placeringsstödet bestämmer den föredragna positionen för popover i förhållande till målelementet. Dess tillgängliga värden är:

  • bil
  • autostart
  • automatiskt slut
  • topp
  • toppstart
  • övre änden
  • botten
  • botten-start
  • botten
  • höger
  • högerstart
  • högra änden
  • vänster
  • vänster-start
  • vänsteränden

Med popoverClassName kan du definiera ett CSS-klassnamn för popover-elementet. Du kommer först att skapa en CSS-klass i din CSS-fil för att använda rekvisiten.

Till exempel:

 .custom-popover {
  background-color: #e2e2e2;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  border-radius: 12px;
  padding: 1rem;
}

När du har skapat CSS-klassen, använd popoverClassName-propet för att tillämpa den anpassade stilen på Popover2-komponenten:

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

Den minimala rekvisitan styr stylingen av popoveren. Propen accepterar ett booleskt värde. Om den är inställd på sant kommer popover-bilden att ha minimal stil, ingen pil och ett enkelt utseende.

Skapa varningar

Varningar är meddelanden som visas på skärmen för att informera användaren om viktig information eller åtgärder. De används ofta för att visa felmeddelanden, framgångsmeddelanden eller varningar.

Att skapa varningar i Blueprint UI liknar att skapa varningar med Chakra UI. Du kommer att använda Alert-komponenten för att skapa en varning i din React-applikation med hjälp av Blueprint UI.

Här är ett exempel:

 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;

Det här exemplet visar hur du måste importera Alert-komponenten från @blueprintjs/core-paketet. Varningskomponenten visar ett varningsmeddelande på skärmen. Det krävs också tre rekvisita: isOpen, onClose och confirmButtonText.

isOpen-rekvisiten avgör om varningen är synlig eller inte. Ställ in den på true för att visa varningen och false för att dölja den. onClose prop är en återuppringningsfunktion som körs när en användare stänger varningen.

Slutligen bestämmer bekräftelseButtonText texten som visas på bekräftelseknappen.

Varningsmeddelandet i det här exemplet kommer att se ut så här:

Skapa skålar med Blueprint UI

Toasts är meddelanden som visas på skärmen för att informera användaren om viktig information eller händelser. De liknar varningar men är vanligtvis mindre påträngande och försvinner snabbt.

För att skapa en skål i din React-applikation med Blueprint UI, använd OverlayToaster-komponenten. OverlayToaster-komponenten skapar en Toaster-instans som sedan används för att skapa individuella toaster.

Till exempel:

 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;

Kodblocket ovan använder metoden OverlayToaster.create för att generera brödrostförekomsten och specificerar dess position med hjälp av positionsprovet.

Den definierar också funktionen showToast. Den här funktionen använder showmetoden för toasterInstance för att visa toasten när den anropas. Showmetoden tar ett objekt med meddelandet, avsikt, timeout, isCloseButtonShown och ikonrekvisita.

Meddelandets prop anger textinnehållet i toasten, medan intent prop specificerar typen av toast. Stilen på toasten kommer att variera beroende på dess värde.

Du kan styra hur länge toastaviseringen visas med hjälp av timeout-propet. Ikonen prop anger ett ikonelement som ska visas i toasten. Med isCloseButtonShown-rekvisiten kan du styra om stängningsknappen visas i toasten.

Kodblocket ovan kommer att generera en vacker skål när du klickar på knappen, som ses i bilden nedan.

Om du vill skapa attraktiva toast-aviseringar i din React-applikation är Blueprint UI ett bra alternativ. Den tillhandahåller ett brett utbud av fördefinierade komponenter som du kan använda för att skapa meddelanden som matchar din applikations stil.

Men om du arbetar med ett litet projekt som inte kräver alla funktioner i Blueprint UI, är React Toastify ett lättviktigt alternativ till att skapa vackra meddelanden.

Förbättra användarupplevelsen med skålar, popovers och varningar

Du har lärt dig hur du skapar popovers, varningar och skålar i din React-applikation med hjälp av Blueprint UI. Dessa komponenter är viktiga för att ge information och feedback till användare och kan avsevärt förbättra användarupplevelsen av din applikation. Du kan enkelt skapa dessa komponenter med hjälp av den information du har uppnått med minimal ansträngning och anpassning.