Byg din React-applikation med Blueprint UI Toolkit

At bygge en React-applikation fra bunden kan være en tidskrævende og udfordrende opgave, især når det kommer til styling af komponenter. Det er her, Blueprint UI Toolkit kommer til nytte. Værktøjssættet er et sæt genbrugelige UI-komponenter, der kan hjælpe dig med at skabe ensartede og visuelt tiltalende grænseflader til dine React-applikationer.

Lær om det grundlæggende i Blueprint UI Toolkit, og hvordan du bruger det til at bygge en simpel React-applikation.

Blueprint UI Toolkit er en React UI komponentbibliotek. Den indeholder en samling af præfabrikerede komponenter, der er nemme at bruge og tilpasse. Du kan bruge disse foruddesignede komponenter ud af æsken eller modificere dem, så de passer til dine specifikke behov.

Blueprint UI Toolkit's komponenter inkluderer knapper, formularer, modaler, navigation og tabeller. Brug af disse komponenter kan spare dig tid og kræfter, da du ikke behøver at designe og bygge hver komponent fra bunden.

For at komme i gang med Blueprint UI Toolkit, skal du oprette en React-applikation.

Når dit projekt er konfigureret, kan du installere Blueprint UI Toolkit ved at bruge et hvilket som helst Node-pakkeinstallationsprogram, du vælger. For at installere Blueprint UI Toolkit ved hjælp af npm skal du køre følgende kommando i din terminal:

npm installer @blueprintjs/core

For at bruge garn i stedet skal du køre denne kommando:

garn tilføj @blueprintjs/core

Når du har installeret Blueprint UI Toolkit, kan du bruge komponenterne efter eget valg i din React-applikation.

Inden du bruger komponenterne, skal du inkludere CSS-filerne fra Blueprint UI Toolkit:

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

Tilføjelse af kodeblokken ovenfor til din CSS-fil anvender Blueprint UI-stilene til dens komponenter.

For at tilføje en knap til din applikation skal du f.eks. bruge Knap komponent fra Blueprint UI Toolkit:

importere Reagere fra"reagere";
importere { Knap } fra"@blueprintjs/core";
fungereApp() {
Vend tilbage (



"succes" tekst="Klik på mig" ikon="Opdater" lille={rigtigt}/>
 </div>
 );
}
eksportStandard App;

Denne kodeblok tilføjer en knap til din applikation ved hjælp af Knap komponent. Det Knap komponent tager rekvisitter som f.eks hensigt, tekst, ikon, lille, og stor.

Det hensigt prop definerer knappens natur, som afspejles i dens baggrundsfarve. I dette eksempel har knappen en succes hensigt, som giver den en grøn baggrundsfarve. Blueprint UI tilbyder flere kernehensigter, herunder primær (blå), succes (grøn), advarsel (orange), og fare (rød).

Du kan angive den tekst, der vises inde i knappen med tekst rekvisit. Du kan også tilføje ikoner til knappen ved hjælp af ikon rekvisit. Ved siden af ikon prop er højreikon prop, som tilføjer ikonet til højre side af knappen.

Til sidst stor og lille booleske rekvisitter angiver størrelsen på knappen. Det stor prop gør knappen større, mens den lille prop gør den mindre.

Den tidligere kodeblok vil generere en knap, der ser sådan ud:

Du kan også bruge Ankerknap komponent for at oprette en knap i din applikation. Det Ankerknap component er en specialiseret version af Button-komponenten, der er eksplicit designet til brug som et link.

Denne komponent accepterer mange af de samme rekvisitter som Button-komponenten, inklusive tekst, stor, lille, hensigt, og ikon. Det accepterer også href og mål rekvisitter.

Det href prop angiver den URL, knappen linker til, og mål prop angiver målvinduet eller -rammen for linket:

importere Reagere fra"reagere";
importere { AnchorButton } fra"@blueprintjs/core";
fungereApp() {
Vend tilbage (



 href=" https://example.com/"
 hensigt ="primær"
 tekst="Klik på mig"
 target="_blank"
 />
 </div>
 );
}
eksportStandard App;

Denne kodeblok ovenfor gengiver en Ankerknap komponent. Komponentens href prop værdi er " https://example.com/” og mål prop-værdien er "_blank", hvilket betyder, at linket åbnes i en anden browserfane eller et andet vindue.

En anden vigtig komponent i Blueprint UI Toolkit er Kort komponent. Dette er en genbrugelig komponent, der viser information på en tiltalende visuel måde.

Kort-komponenten tager to rekvisitter interaktive og højde. Det højde prop styrer kortets skyggedybde, med højere værdier, der giver en mere fremtrædende skyggeeffekt.

Det interaktive prop accepterer en boolesk værdi. Når den er indstillet til sand, aktiverer den svæve- og klik-interaktioner på kortet, så det kan reagere på brugerinput.

For eksempel:

importere Reagere fra"reagere";
importere { Kort, Højde } fra"@blueprintjs/core";
fungereApp() {
Vend tilbage (



rigtigt} elevation={Elevation. TO}>
Dette er et kort</h2>


Dette er noget indhold i mit kort</p>
 </Card>
 </div>
 );
}
eksportStandard App;

I dette eksempel er Kort komponent har en titel og noget indhold. Det interaktive prop er indstillet til rigtigt.

Du importerer også Højde komponent fra @blueprintjs/core. Det Højde komponent er en enum, der definerer et sæt foruddefinerede værdier, du kan bruge til at indstille en komponents skyggedybde.

Her er de tilgængelige værdier for Højde enum:

1. Højde. NUL: Denne værdi indstiller skyggedybden til 0, hvilket indikerer, at komponenten ikke har nogen anvendt skygge
2. Højde. EN: Denne værdi indstiller skyggedybden til 1.
3. Højde. TO: Denne værdi indstiller skyggedybden til 2.
4. Højde. TRE: Denne værdi indstiller skyggedybden til 3.
5. Højde. FIRE: Denne værdi indstiller skyggedybden til 4.
6. Højde. FEM: Denne værdi indstiller skyggedybden til 5.

Gengivelse af kodeblokken ovenfor vil vise et billede på din skærm, der ser sådan ud:

Blueprint UI Toolkit-komponenter er nemme at tilpasse. Du kan bruge traditionel CSS for at ændre komponenternes udseende, eller du kan bruge de medfølgende rekvisitter til at ændre deres adfærd.

For eksempel kan du tilpasse udseendet af en knap ved at indsætte en klassenavn rekvisit:

importere Reagere fra"reagere";
importere { Knap } fra"@blueprintjs/core";
fungereApp() {
Vend tilbage (



"Klik på mig" klassenavn='min-knap'/>
 </div>
 );
}
eksportStandard App;

Kodeblokken ovenfor anvender en brugerdefineret klasse på knappen, så du kan ændre dens udseende ved hjælp af CSS:

.min-knap{
grænse-radius: 10px;
polstring: 0.4rem 0.8rem;
}

Anvendelse af disse stilarter vil få din knap til at se lidt sådan ud:

Der er meget mere til Blueprint UI

Blueprint UI tilbyder flere komponenter end nævnt ovenfor, såsom Alert, Popover, toast osv. Men med de angivne oplysninger kan du bygge en simpel React-applikation ved hjælp af Blueprint UI.

Du kan style din React-applikation ved hjælp af forskellige metoder. Du kan bruge traditionel CSS, SASS/SCSS, Tailwind CSS og CSS i JS-biblioteker såsom følelser, stylede komponenter osv.