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

Blueprint UI är ett omtyckt ramverk för React som erbjuder en omfattande samling av återanvändbara komponenter och designmallar, perfekta för att utveckla moderna webbapplikationer. En viktig del av Blueprint UI:s funktionalitet är dess stöd för att konstruera popovers, varningar och meddelanden (toasts), vilka är centrala för att kommunicera information och återkoppling till användarna.

Installation av Blueprint UI

För att börja använda Blueprint UI behöver du först installera paketet. Detta gör du enkelt med hjälp av valfri pakethanterare.

För att installera via npm, JavaScripts pakethanterare, använd följande kommando i din terminal:

 npm install @blueprintjs/core

Efter installationen av Blueprint UI behöver du importera CSS-stilmallarna 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 säkerställer du att Blueprint UI:s stilmallar integreras sömlöst med de komponenter som biblioteket tillhandahåller.

Skapa Popovers med Blueprint UI

Popovers är interaktiva element som visas när användaren hovrar över eller klickar på ett annat element. De ger möjlighet att presentera ytterligare information eller alternativ till användaren.

För att integrera popovers i din React-applikation med Blueprint UI, behöver du installera komponenten Blueprint UI Popover2.

Detta gör du genom att köra följande kommando i din terminal:

 npm install --save @blueprintjs/popover2

Se till att du också inkluderar stilmallen i din CSS-fil:

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

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

Här är ett exempel:

 import React from "react";
import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";
function App() {
  const popoverContent = (
    <div>
      <h3>Rubrik för Popover</h3>
      <p>Detta är innehållet i popovern.</p>
    </div>
  );
  return (
    <div>
      <Popover2 content={popoverContent}>
        <Button intent="success" text="Klicka här" />
      </Popover2>
    </div>
  );
}
export default App;
 

Den här koden skapar en popover med hjälp av Popover2-komponenten. En variabel, `popoverContent`, definieras och innehåller JSX-koden för popoverns innehåll.

Popover2-komponenten tar `popoverContent` som värde för dess `content`-prop. Denna prop anger vilket innehåll som ska visas i popover-fönstret. Här omger Popover2-komponenten en Button-komponent, vilket gör att popover-fönstret visas när användaren klickar på knappen.

En grundläggande popover ser ut som nedan:

Du kan anpassa popoverns utseende genom att skicka en `className`-prop till `popoverContent` JSX-koden:

 const popoverContent = (
  <div className="popover">
    <h3>Rubrik för Popover</h3>
    <p>Detta är innehållet i popovern.</p>
  </div>
);

Sedan definierar du CSS-klassen i din CSS-fil:

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

Nu bör popovern se mer anpassad ut:

Popover2-komponenten tar emot ett antal props som hjälper dig att anpassa den för dina behov. Några av dessa props är `popoverClassName`, `onInteraction`, `isOpen`, `minimal` och `placement`.

`Placement`-stödet bestämmer den önskade positionen för popovern i förhållande till målelementet. Tillgängliga värden inkluderar:

• auto
• autostart
• autoend
• top
• top-start
• top-end
• bottom
• bottom-start
• bottom-end
• right
• right-start
• right-end
• left
• left-start
• left-end

Med `popoverClassName` kan du definiera ett CSS-klassnamn för popover-elementet. Först skapar du CSS-klassen i din CSS-fil för att kunna använda prop:en.

Exempel:

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

Efter att du har skapat CSS-klassen, använd `popoverClassName`-propen 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="Klicka här" />
</Popover2>

Den `minimal`-propen styr popoverns styling. Propen tar ett booleskt värde. Om den är satt till `true` får popovern en minimalistisk stil, utan pil och med ett enklare 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, bekräftelser eller varningar.

Att skapa varningar med Blueprint UI liknar att skapa dem med andra bibliotek. Du kommer att använda Alert-komponenten för att skapa en varning i din React-applikation med 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="Stäng">
        <p>Detta är ett varningsmeddelande</p>
      </Alert>
      <Button text="Klicka här" intent="success" onClick={handleOpen} />
    </div>
  );
}
export default App;
 

Detta exempel visar hur du importerar Alert-komponenten från `@blueprintjs/core`-paketet. Varningskomponenten visar ett varningsmeddelande på skärmen. Den kräver tre props: `isOpen`, `onClose` och `confirmButtonText`.

`isOpen`-propen avgör om varningen är synlig. Ställ den till `true` för att visa varningen och `false` för att dölja den. `onClose`-propen är en callback-funktion som körs när användaren stänger varningen.

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

Varningsmeddelandet i detta exempel ser ut så här:

Skapa Meddelanden (Toasts) med Blueprint UI

Meddelanden (toasts) är notifikationer 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 ett meddelande i din React-applikation med Blueprint UI, använd `OverlayToaster`-komponenten. Denna komponent skapar en `Toaster`-instans som sedan används för att skapa individuella meddelanden.

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: "Detta är ett meddelande",
      intent: "primary",
      timeout: 3000,
      isCloseButtonShown: false,
      icon: "bookmark",
    });
  };
  return (
    <div>
      <Button text="Klicka här" intent="success" onClick={showToast} />
    </div>
  );
}
export default App;
 

Koden ovan använder metoden `OverlayToaster.create` för att skapa en brödrostinstans, där positionen specificeras med hjälp av `position`-propen.

Funktionen `showToast` definieras också. Denna funktion använder `show`-metoden på `toasterInstance` för att visa meddelandet när den anropas. Metoden `show` tar ett objekt med `message`, `intent`, `timeout`, `isCloseButtonShown` och `icon` props.

Meddelandets `message`-prop anger textinnehållet i meddelandet, medan `intent`-propen specificerar typen av meddelande. Stilen på meddelandet kommer att variera beroende på dess värde.

Du kan styra hur länge meddelandet visas med `timeout`-propen. `Icon`-propen anger en ikon som ska visas i meddelandet. `isCloseButtonShown`-propen låter dig styra om stängningsknappen visas i meddelandet.

Koden ovan genererar ett snyggt meddelande när du klickar på knappen, som du kan se i bilden nedan.

Om du vill skapa attraktiva meddelanden i din React-applikation är Blueprint UI ett bra val. Det erbjuder ett brett utbud av fördefinierade komponenter som du kan använda för att skapa meddelanden som matchar din applikations utseende.

Men om du arbetar med ett mindre projekt som inte kräver alla funktioner i Blueprint UI, är React Toastify ett mer lättviktigt alternativ för att skapa snygga meddelanden.

Förbättra Användarupplevelsen med Meddelanden, Popovers och Varningar

Du har lärt dig hur du skapar popovers, varningar och meddelanden i din React-applikation med Blueprint UI. Dessa komponenter är viktiga för att kommunicera information och feedback till användare och kan avsevärt förbättra användarupplevelsen i din applikation. Du kan enkelt skapa dessa komponenter med den kunskap du nu har, med minimal ansträngning och anpassning.