Uw React-toepassing bouwen met Blueprint UI Toolkit

Het helemaal opnieuw bouwen van een React-applicatie kan een tijdrovende en uitdagende taak zijn, vooral als het gaat om stylingcomponenten. Dat is waar Blueprint UI Toolkit van pas komt. De toolkit is een set herbruikbare UI-componenten die u kunnen helpen bij het creëren van consistente en visueel aantrekkelijke interfaces voor uw React-applicaties.

Lees meer over de basisprincipes van de Blueprint UI Toolkit en hoe u deze kunt gebruiken om een ​​eenvoudige React-toepassing te bouwen.

Blueprint UI Toolkit is een React UI-componentenbibliotheek. Het bevat een verzameling kant-en-klare componenten die gemakkelijk te gebruiken en aan te passen zijn. U kunt deze vooraf ontworpen componenten direct uit de doos gebruiken of ze aanpassen aan uw specifieke behoeften.

De componenten van de Blueprint UI Toolkit omvatten knoppen, formulieren, modaliteiten, navigatie en tabellen. Het gebruik van deze componenten kan u tijd en moeite besparen, omdat u niet elk onderdeel vanaf nul hoeft te ontwerpen en bouwen.

Om aan de slag te gaan met Blueprint UI Toolkit, moet u dat doen maak een React-applicatie.

Zodra uw project is ingesteld, kunt u Blueprint UI Toolkit installeren met behulp van elk gewenst Node-pakketinstallatieprogramma. Om Blueprint UI Toolkit te installeren met behulp van npm, voert u de volgende opdracht uit in uw terminal:

npm installeer @blueprintjs/core

Om in plaats daarvan garen te gebruiken, voert u deze opdracht uit:

garen toevoegen @blueprintjs/core

Nadat u Blueprint UI Toolkit hebt geïnstalleerd, kunt u de componenten van uw keuze gebruiken in uw React-toepassing.

Voordat u de componenten gebruikt, voegt u de CSS-bestanden van Blueprint UI Toolkit toe:

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

Door het bovenstaande codeblok toe te voegen aan uw CSS-bestand, worden de Blueprint UI-stijlen toegepast op de componenten ervan.

Om bijvoorbeeld een knop aan uw applicatie toe te voegen, gebruikt u de Knop component van Blueprint UI Toolkit:

importeren Reageer van"Reageer";
importeren { Knop } van"@blueprintjs/kern";
functieapp() {
opbrengst (



"succes" tekst="Klik hier" icoon="opfrissen" klein={WAAR}/>
 </div>
 );
}
exporterenstandaard App;

Dit codeblok voegt een knop toe aan uw toepassing met behulp van de Knop bestanddeel. De Knop component neemt rekwisieten zoals opzet, tekst, icoon, klein, En groot.

De opzet prop definieert de aard van de knop, die wordt weerspiegeld in de achtergrondkleur. In dit voorbeeld heeft de knop een succes intentie waardoor het een groene achtergrondkleur krijgt. Blueprint UI biedt verschillende kernintenties, waaronder primair (blauw), succes (groente), waarschuwing (oranje), en Gevaar (rood).

U kunt de tekst specificeren die in de knop verschijnt met de tekst prop. U kunt ook pictogrammen aan de knop toevoegen met behulp van de icoon prop. Naast de icoon prop is de rechtsIcon prop, waarmee het pictogram aan de rechterkant van de knop wordt toegevoegd.

Als laatste de groot En klein Booleaanse rekwisieten specificeren de grootte van de knop. De groot prop maakt de knop groter, terwijl de klein prop maakt het kleiner.

Het eerdere codeblok genereert een knop die er als volgt uitziet:

U kunt ook de Ankerknop component om een ​​knop in uw toepassing te maken. De Ankerknop component is een gespecialiseerde versie van de Button-component die expliciet is ontworpen voor gebruik als een link.

Dit onderdeel accepteert veel van dezelfde rekwisieten als het knoponderdeel, inclusief tekst, groot, klein, opzet, En icoon. Het accepteert ook de href En doel rekwisieten.

De href prop specificeert de URL waarnaar de knop linkt, en het doel prop specificeert het doelvenster of frame voor de link:

importeren Reageer van"Reageer";
importeren { Ankerknop } van"@blueprintjs/kern";
functieapp() {
opbrengst (



 href=" https://example.com/"
 bedoeling="primair"
 tekst="Klik hier"
 doel="_blanco"
 />
 </div>
 );
}
exporterenstandaard App;

Dit codeblok hierboven geeft een Ankerknop bestanddeel. De onderdelen href prop-waarde is " https://example.com/” en de doel prop-waarde is "_blank", wat betekent dat de link wordt geopend in een ander browsertabblad of -venster.

Een ander essentieel onderdeel van de Blueprint UI Toolkit is de Kaart bestanddeel. Dit is een herbruikbaar onderdeel dat informatie op een aantrekkelijke visuele manier weergeeft.

Voor het kaartonderdeel zijn twee rekwisieten nodig interactief En verhoging. De verhoging prop regelt de schaduwdiepte van de kaart, waarbij hogere waarden een prominenter schaduweffect produceren.

De interactief prop accepteert een booleaanse waarde. Indien ingesteld op waar, maakt het hover- en klikinteracties op de kaart mogelijk, zodat deze kan reageren op gebruikersinvoer.

Bijvoorbeeld:

importeren Reageer van"Reageer";
importeren { Kaart, Hoogte } van"@blueprintjs/kern";
functieapp() {
opbrengst (



WAAR} hoogte={hoogte. TWEE}>
Dit is een kaart</h2>


Dit is wat inhoud in mijn kaart</p>
 </Card>
 </div>
 );
}
exporterenstandaard App;

In dit voorbeeld is de Kaart component heeft een titel en wat inhoud. De interactief prop is ingesteld op WAAR.

Je importeert ook de Verhoging onderdeel van @blauwdrukjs/core. De Verhoging component is een opsomming die een reeks vooraf gedefinieerde waarden definieert die u kunt gebruiken om de schaduwdiepte van een component in te stellen.

Hier zijn de beschikbare waarden van de Verhoging opsomming:

1. Verhoging. NUL: Deze waarde stelt de schaduwdiepte in op 0, wat aangeeft dat de component geen toegepaste schaduw heeft
2. Verhoging. EEN: Deze waarde stelt de schaduwdiepte in op 1.
3. Verhoging. TWEE: Deze waarde stelt de schaduwdiepte in op 2.
4. Verhoging. DRIE: Deze waarde stelt de schaduwdiepte in op 3.
5. Verhoging. VIER: Deze waarde stelt de schaduwdiepte in op 4.
6. Verhoging. VIJF: Deze waarde stelt de schaduwdiepte in op 5.

Door het codeblok hierboven te renderen, wordt een afbeelding op uw scherm weergegeven die er als volgt uitziet:

Blueprint UI Toolkit-componenten zijn eenvoudig aan te passen. U kunt traditionele CSS gebruiken om het uiterlijk van de componenten te wijzigen, of u kunt de verstrekte rekwisieten gebruiken om hun gedrag te veranderen.

U kunt bijvoorbeeld het uiterlijk van een knop aanpassen door een in te voeren naam van de klasse steun:

importeren Reageer van"Reageer";
importeren { Knop } van"@blueprintjs/kern";
functieapp() {
opbrengst (



"Klik hier" classNaam='mijn-knop'/>
 </div>
 );
}
exporterenstandaard App;

Het bovenstaande codeblok past een aangepaste klasse toe op de knop, zodat u het uiterlijk kunt wijzigen met behulp van CSS:

.mijn-knop{
grensradius: 10px;
opvulling: 0.4rem 0.8rem;
}

Als u deze stijlen toepast, ziet uw knop er ongeveer zo uit:

Er is veel meer in de gebruikersinterface van Blueprint

Blueprint UI biedt meer componenten dan hierboven vermeld, zoals Alert, Popover, toast, etc. Met de verstrekte informatie kunt u echter een eenvoudige React-toepassing bouwen met behulp van Blueprint UI.

U kunt uw React-applicatie op verschillende manieren stylen. U kunt traditionele CSS, SASS/SCSS, Tailwind CSS en CSS in JS-bibliotheken gebruiken, zoals emotie, gestileerde componenten, enz.