Enkla, rena UI-element kan fräscha upp din design och lägga till en touch av kvalitet till din webbplats eller app.

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 den med hjälp av npm, JavaScript-pakethanteraren, kör följande kommando i din terminal:

npm installera @blueprintjs/core

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

@importera"normalisera.css";
@importera"@blueprintjs/core/lib/css/blueprint.css";
@importera"@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.

instagram viewer

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

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

npm installera --spara @blueprintjs/popover2

Se till att importera paketformatmallen i din CSS-fil:

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

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

Till exempel:

importera Reagera från"reagera";
importera { Knapp } från"@blueprintjs/core";
importera { Popover2 } från"@blueprintjs/popover2";
fungeraApp() {
konst popoverContent = (




Popover-titel</h3>




Det här är innehållet i popoveren.</p>
 </div>
 );


lämna tillbaka (









exporterastandard App;

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

De Popover2 komponent tar popoverContent som värdet av dess innehåll stötta. De innehåll prop anger innehållet som visas i popover-fönstret. Här, den Popover2 komponentomslag a Knapp 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 styla popover-innehållet genom att skicka en klassnamn stötta till popoverContent JSX-kod:

konst popoverContent = (
'popover'>
Popover-titel</h3>




Det här är innehållet i popoveren.</p>
 </div>
);

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

.popover {
stoppning: 1rem;
bakgrundsfärg: #e2e2e2;
typsnittsfamilj: kursiv;
}

Nu borde popoveren se lite bättre ut:

De Popover2 komponent tar några rekvisita som hjälper dig att konfigurera den för att passa dina behov. Några av dessa rekvisita är popoverClassName, på Interaktion, är öppen, minimal, och placering.

De placering prop 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 {
bakgrundsfärg: #e2e2e2;
box-skugga: 0 10px 15px-3 pxrgb(0 0 0 / 0.1);
gräns-radie: 12px;
stoppning: 1rem;
}

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

 content={popoverContent}
 placering="bottom-end"
 popoverClassName="anpassad popover"
 minimal={Sann}
>

De minimal prop styr utformningen av popover. 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 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:

importera Reagera från"reagera";
importera { Varning, knapp } från"@blueprintjs/core";
fungeraApp() {
konst [isOpen, setIsOpen] = React.useState(falsk);


konst handtagOpen = () => {
 setIsOpen(Sann);
 };


konst handtagStäng = () => {
 setIsOpen(falsk);
 };


lämna tillbaka (




"Stänga">
Detta är ett varningsmeddelande</p>
 </Alert>




exporterastandard App;

Det här exemplet visar hur du måste importera Varna komponent från @blueprintjs/core paket. De Varna komponent ger ett varningsmeddelande på skärmen. Det krävs också tre rekvisita: är öppen, påStäng, och confirmButtonText.

De är öppen prop 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. De påStäng prop är en återuppringningsfunktion som körs när en användare stänger varningen.

Slutligen confirmButtonText prop bestämmer 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 hjälp av Blueprint UI, använd OverlayToaster komponent. De OverlayToaster komponenten skapar en Toaster-instans som sedan används för att skapa individuella toasts.

Till exempel:

importera Reagera från"reagera";
importera { OverlayToaster, knapp } från"@blueprintjs/core";
konst toasterInstance = OverlayToaster.create({ placera: "överst till höger" });


fungeraApp() {
konst showToast = () => {
 toasterInstance.show({
 meddelande: "Detta är en skål",
 avsikt: "primär",
 Paus: 3000,
 isCloseButtonShown: falsk,
 ikon: "bokmärke",
 });
 };


lämna tillbaka (






exporterastandard App;

Kodblocket ovan använder OverlayToaster.create metod för att generera brödrostinstansen och specificerar dess position med hjälp av placera stötta.

Den definierar också funktionen showToast. Denna funktion använder show metod för toasterInstance för att visa toasten när den anropas. De show metoden tar ett objekt med meddelande, avsikt, Paus, isCloseButtonShown, och ikon rekvisita.

De meddelande prop anger textinnehållet i rostat bröd, medan avsikt prop anger typen av rostat bröd. Stilen på toasten kommer att variera beroende på dess värde.

Du kan styra hur länge toastaviseringen visas med hjälp av Paus stötta. De ikon prop anger ett ikonelement som ska visas i toasten. Med isCloseButtonShown prop, du kan 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, React Toastify är ett lättviktigt alternativ till att skapa vackra aviseringar.

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.