Eenvoudige, schone UI-elementen kunnen uw ontwerp opfrissen en een vleugje kwaliteit toevoegen aan uw website of app.

Blueprint UI is een populaire React UI-toolkit die een set herbruikbare componenten en stijlen biedt voor het bouwen van moderne webapplicaties. Een van de belangrijkste kenmerken van Blueprint UI is de ondersteuning voor het maken van popovers, waarschuwingen en toasts, die essentiële componenten zijn voor het weergeven van informatie en feedback aan gebruikers.

Blueprint-gebruikersinterface installeren

Om aan de slag te gaan met Blueprint UI, moet u deze eerst installeren. U kunt dit doen met elke pakketbeheerder van uw keuze.

Om het te installeren met behulp van npm, de JavaScript-pakketbeheerder, voer de volgende opdracht uit in uw terminal:

npm installeer @blueprintjs/core

Na installatie van Blueprint UI moet u de CSS-bestanden uit de bibliotheek importeren:

@importeren"normaliseren.css";
@importeren"@blueprintjs/core/lib/css/blueprint.css";
@importeren"@blueprintjs/icons/lib/css/blueprint-icons.css";
instagram viewer

Door deze bestanden te importeren, kunt u de Blueprint UI-stijlen integreren met de componenten die Blueprint UI biedt.

Popovers maken met behulp van Blueprint UI

Popovers zijn tooltips die verschijnen wanneer de gebruiker met de muis over een element beweegt of erop klikt. Ze bieden de gebruiker aanvullende informatie of opties.

Om popovers in uw React-toepassing te maken met behulp van de Blueprint-gebruikersinterface, moet u de Blueprint-gebruikersinterface installeren Popover2 bestanddeel.

Voer hiervoor de volgende code uit in uw terminal:

npm install --save @blueprintjs/popover2

Zorg ervoor dat u de pakketstylesheet in uw CSS-bestand importeert:

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

Na het importeren van de stylesheet kunt u de Popover2 component om popovers in uw toepassing te maken.

Bijvoorbeeld:

importeren Reageer van"Reageer";
importeren { Knop } van"@blueprintjs/kern";
importeren { Popover2 } van"@blueprintjs/popover2";
functieapp() {
const popoverContent = (




Popover-titel</h3>




Dit is de inhoud in de popover.</p>
 </div>
 );


opbrengst (









exporterenstandaard App;

Deze code maakt een popover met behulp van de Popover2 bestanddeel. Het definieert ook een popoverInhoud variabele, die de JSX-code bevat voor de popover-inhoud.

De Popover2 onderdeel neemt de popoverInhoud als de waarde ervan inhoud prop. De inhoud prop specificeert de inhoud die wordt weergegeven in de popover. Hier de Popover2 component wraps een Knop bestanddeel. Hierdoor wordt de popover weergegeven wanneer u op de knop klikt.

De popover ziet er eenvoudig uit, zoals hier getoond:

U kunt de popover-inhoud opmaken door een naam van de klasse steun aan de popoverInhoud JSX-code:

const popoverContent = (
'pop-over'>
Popover-titel</h3>




Dit is de inhoud in de popover.</p>
 </div>
);

Vervolgens kunt u de CSS-klasse definiëren in uw CSS-bestand:

.popover {
opvulling: 1rem;
Achtergrond kleur: #e2e2e2;
font-familie: cursief;
}

Nu zou de popover er iets beter uit moeten zien:

De Popover2 component heeft een aantal rekwisieten nodig die u zullen helpen bij het configureren ervan om aan uw behoeften te voldoen. Sommige van deze rekwisieten zijn popoverKlasseNaam, op Interactie, is geopend, minimaal, En plaatsing.

De plaatsing prop bepaalt de voorkeurspositie van de popover ten opzichte van het doelelement. De beschikbare waarden zijn:

  • auto
  • automatische start
  • automatische beëindiging
  • bovenkant
  • top-start
  • de beste
  • onderkant
  • onder-begin
  • onderkant
  • rechts
  • rechts-start
  • rechterzijde
  • links
  • links-start
  • linkerkant

Met de popoverKlasseNaam, kunt u een CSS-klassenaam definiëren voor het popover-element. U maakt eerst een CSS-klasse in uw CSS-bestand om de prop te gebruiken.

Bijvoorbeeld:

.aangepaste popover {
Achtergrond kleur: #e2e2e2;
doos-schaduw: 0 10px 15px-3pxRGB(0 0 0 / 0.1);
grensradius: 12px;
opvulling: 1rem;
}

Gebruik na het maken van de CSS-klasse de popoverKlasseNaam prop om de aangepaste stijl toe te passen op de Popover2-component:

 content={popoverContent}
 plaatsing="onderkant"
 popoverClassName="aangepaste popover"
 minimaal={WAAR}
>

De minimaal prop regelt de styling van de popover. De prop accepteert een booleaanse waarde. Indien ingesteld op waar, heeft de popover een minimale stijl, geen pijl en een eenvoudig kader.

Waarschuwingen maken

Alerts zijn notificaties die op het scherm verschijnen om de gebruiker te informeren over belangrijke informatie of acties. Ze worden vaak gebruikt om foutberichten, succesberichten of waarschuwingen weer te geven.

Het maken van waarschuwingen in de gebruikersinterface van Blueprint is vergelijkbaar met waarschuwingen maken met Chakra UI. U gebruikt de waarschuwingscomponent om een ​​waarschuwing in uw React-toepassing te maken met behulp van Blueprint UI.

Hier is een voorbeeld:

importeren Reageer van"Reageer";
importeren { Melding, Knop } van"@blueprintjs/kern";
functieapp() {
const [isOpen, setIsOpen] = React.useState(vals);


const handvatOpen = () => {
 setIsOpen(WAAR);
 };


const handleClose = () => {
 setIsOpen(vals);
 };


opbrengst (




"Dichtbij">
Dit is een waarschuwingsbericht</p>
 </Alert>




exporterenstandaard App;

Dit voorbeeld laat zien hoe u het Alarm onderdeel uit de @blauwdrukjs/core pakket. De Alarm component geeft een waarschuwingsbericht weer op het scherm. Er zijn ook drie rekwisieten voor nodig: is geopend, opSluiten, En confirmButtonText.

De is geopend prop bepaalt of de waarschuwing zichtbaar is of niet. Stel deze in op true om de waarschuwing weer te geven en op false om deze te verbergen. De opSluiten prop is een callback-functie die wordt uitgevoerd wanneer een gebruiker de waarschuwing sluit.

Als laatste de confirmButtonText prop bepaalt de tekst die wordt weergegeven op de bevestigingsknop.

De waarschuwingsmelding in dit voorbeeld ziet er als volgt uit:

Toasts maken met Blueprint UI

Toasts zijn meldingen die op het scherm verschijnen om de gebruiker te informeren over belangrijke informatie of gebeurtenissen. Ze lijken op waarschuwingen, maar zijn doorgaans minder opdringerig en verdwijnen snel.

Gebruik de OverlayBroodrooster bestanddeel. De OverlayBroodrooster component maakt een Toaster-instantie die vervolgens wordt gebruikt om individuele toasts te maken.

Bijvoorbeeld:

importeren Reageer van"Reageer";
importeren { OverlayToaster, Knop } van"@blueprintjs/kern";
const toasterInstance = OverlayToaster.create({ positie: "rechtsboven" });


functieapp() {
const toon Toast = () => {
 toasterInstance.show({
 bericht: "Dit is een toost",
 opzet: "primair",
 time-out: 3000,
 isCloseButtonGetoond: vals,
 icoon: "bladwijzer",
 });
 };


opbrengst (






exporterenstandaard App;

Het codeblok hierboven gebruikt de OverlayToaster.creëren methode om de broodroosterinstantie te genereren en specificeert zijn positie met behulp van de positie prop.

Het definieert ook de functie toon Toast. Deze functie maakt gebruik van de show methode van de broodroosterInstance om de toast weer te geven wanneer deze wordt gebeld. De show methode neemt een object met de bericht, opzet, time-out, isCloseButtonGetoond, En icoon rekwisieten.

De bericht prop specificeert de tekstinhoud van de toast, terwijl de opzet prop specificeert het type toast. De stijl van de toast is afhankelijk van de waarde.

U kunt bepalen hoe lang de toastmelding wordt weergegeven met behulp van de time-out prop. De icoon prop specificeert een pictogramelement om in de toast weer te geven. Met de isCloseButtonGetoond prop, kunt u bepalen of de knop Sluiten wordt weergegeven in de toast.

Het bovenstaande codeblok genereert een mooie toast wanneer u op de knop klikt, zoals te zien is in de afbeelding hieronder.

Als u aantrekkelijke toastmeldingen wilt maken in uw React-toepassing, is Blueprint UI een geweldige optie. Het biedt een breed scala aan vooraf gedefinieerde componenten die u kunt gebruiken om meldingen te maken die passen bij de stijl van uw toepassing.

Als u echter aan een klein project werkt waarvoor niet alle functies van de Blueprint UI nodig zijn, React Toastify is een lichtgewicht alternatief voor het maken van mooie meldingen.

Gebruikerservaring verbeteren met toasts, popovers en waarschuwingen

U hebt geleerd hoe u popovers, waarschuwingen en toasts kunt maken in uw React-toepassing met behulp van Blueprint UI. Deze componenten zijn essentieel voor het verstrekken van informatie en feedback aan gebruikers en kunnen de gebruikerservaring van uw toepassing aanzienlijk verbeteren. U kunt deze componenten eenvoudig maken met behulp van de informatie die u hebt verkregen met minimale inspanning en maatwerk.