Erstellen Sie Ihre React-Anwendung mit dem Blueprint UI Toolkit

Das Erstellen einer React-Anwendung von Grund auf kann eine zeitaufwändige und herausfordernde Aufgabe sein, insbesondere wenn es um das Styling von Komponenten geht. Hier kommt das Blueprint UI Toolkit zum Einsatz. Das Toolkit besteht aus einer Reihe wiederverwendbarer UI-Komponenten, mit denen Sie konsistente und optisch ansprechende Schnittstellen für Ihre React-Anwendungen erstellen können.

Erfahren Sie mehr über die Grundlagen des Blueprint UI Toolkits und wie Sie damit eine einfache React-Anwendung erstellen.

Blueprint UI Toolkit ist ein React UI-Komponentenbibliothek. Es enthält eine Sammlung vorgefertigter Komponenten, die einfach zu verwenden und anzupassen sind. Sie können diese vorgefertigten Komponenten sofort verwenden oder an Ihre spezifischen Anforderungen anpassen.

Zu den Komponenten des Blueprint UI Toolkits gehören Schaltflächen, Formulare, Modalitäten, Navigation und Tabellen. Durch die Verwendung dieser Komponenten können Sie Zeit und Mühe sparen, da Sie nicht jede Komponente von Grund auf neu entwerfen und bauen müssen.

Um mit dem Blueprint UI Toolkit zu beginnen, müssen Sie Folgendes tun Erstellen Sie eine React-Anwendung.

Sobald Ihr Projekt eingerichtet ist, können Sie Blueprint UI Toolkit mit einem beliebigen Node-Paketinstallationsprogramm Ihrer Wahl installieren. Um Blueprint UI Toolkit mit npm zu installieren, führen Sie den folgenden Befehl in Ihrem Terminal aus:

npm install @blueprintjs/core

Um stattdessen Garn zu verwenden, führen Sie diesen Befehl aus:

Garn hinzufügen @blueprintjs/core

Sobald Sie das Blueprint UI Toolkit installiert haben, können Sie die Komponenten Ihrer Wahl in Ihrer React-Anwendung verwenden.

Binden Sie vor der Verwendung der Komponenten die CSS-Dateien aus dem Blueprint UI Toolkit ein:

@importieren„normalisieren.css“;
@importieren„@blueprintjs/core/lib/css/blueprint.css“;
@importieren„@blueprintjs/icons/lib/css/blueprint-icons.css“;

Durch das Hinzufügen des obigen Codeblocks zu Ihrer CSS-Datei werden die Blueprint-UI-Stile auf seine Komponenten angewendet.

Um Ihrer Anwendung beispielsweise eine Schaltfläche hinzuzufügen, verwenden Sie die Taste Komponente aus dem Blueprint UI Toolkit:

importieren Reagieren aus"reagieren";
importieren { Taste } aus„@blueprintjs/core“;
FunktionApp() {
zurückkehren (



"Erfolg" text="Klick mich" icon="Aktualisierung" klein={WAHR}/>
 </div>
 );
}
ExportStandard App;

Dieser Codeblock fügt Ihrer Anwendung mithilfe von eine Schaltfläche hinzu Taste Komponente. Der Taste Die Komponente benötigt Requisiten wie z Absicht, Text, Symbol, klein, Und groß.

Der Absicht prop definiert die Art der Schaltfläche, die sich in ihrer Hintergrundfarbe widerspiegelt. In diesem Beispiel hat die Schaltfläche eine Erfolg Absicht, die ihm eine grüne Hintergrundfarbe verleiht. Blueprint UI bietet mehrere Kernabsichten, darunter primär (Blau), Erfolg (Grün), Warnung (orange) und Achtung (Rot).

Sie können den Text festlegen, der innerhalb der Schaltfläche angezeigt werden soll Text Stütze. Sie können der Schaltfläche auch Symbole hinzufügen, indem Sie die verwenden Symbol Stütze. Neben dem Symbol prop ist die rightIcon prop, die das Symbol auf der rechten Seite der Schaltfläche hinzufügt.

Schließlich die groß Und klein Boolesche Requisiten geben die Größe der Schaltfläche an. Der groß prop vergrößert den Knopf, während der klein Stütze macht es kleiner.

Der frühere Codeblock generiert eine Schaltfläche, die so aussieht:

Sie können auch die verwenden AnchorButton Komponente zum Erstellen einer Schaltfläche in Ihrer Anwendung. Der AnchorButton Die Komponente ist eine spezielle Version der Button-Komponente, die explizit für die Verwendung als Link konzipiert ist.

Diese Komponente akzeptiert viele der gleichen Requisiten wie die Button-Komponente, einschließlich Text, groß, klein, Absicht, Und Symbol. Es akzeptiert auch die href Und Ziel Requisiten.

Der href prop gibt die URL an, auf die die Schaltfläche verweist, und die Ziel prop gibt das Zielfenster oder den Zielrahmen für den Link an:

importieren Reagieren aus"reagieren";
importieren { AnchorButton } aus„@blueprintjs/core“;
FunktionApp() {
zurückkehren (



 href=" https://example.com/"
 Absicht=„primär“
 text="Klick mich"
 Ziel="_leer"
 />
 </div>
 );
}
ExportStandard App;

Dieser Codeblock oben rendert eine AnchorButton Komponente. Die Komponenten href Der Prop-Wert ist „ https://example.com/” und das Ziel Der Prop-Wert ist „_blank“, was bedeutet, dass der Link in einem anderen Browser-Tab oder -Fenster geöffnet wird.

Eine weitere wesentliche Komponente des Blueprint UI Toolkits ist Karte Komponente. Hierbei handelt es sich um eine wiederverwendbare Komponente, die Informationen auf ansprechende visuelle Weise darstellt.

Die Kartenkomponente benötigt zwei Requisiten interaktiv Und Elevation. Der Elevation prop steuert die Schattentiefe der Karte, wobei höhere Werte einen deutlicheren Schatteneffekt erzeugen.

Der interaktiv prop akzeptiert einen booleschen Wert. Wenn es auf „true“ gesetzt ist, ermöglicht es Hover- und Klick-Interaktionen auf der Karte, sodass diese auf Benutzereingaben reagieren kann.

Zum Beispiel:

importieren Reagieren aus"reagieren";
importieren { Karte, Höhe } aus„@blueprintjs/core“;
FunktionApp() {
zurückkehren (



WAHR} height={Elevation. ZWEI}>
Dies ist eine Karte</h2>


Das ist etwas Inhalt In meine Karte</p>
 </Card>
 </div>
 );
}
ExportStandard App;

In diesem Beispiel ist die Karte Die Komponente hat einen Titel und etwas Inhalt. Der interaktiv prop ist auf eingestellt WAHR.

Sie importieren auch die Elevation Komponente aus @blueprintjs/core. Der Elevation Komponente ist eine Enumeration, die eine Reihe vordefinierter Werte definiert, mit denen Sie die Schattentiefe einer Komponente festlegen können.

Hier sind die verfügbaren Werte der Elevation Aufzählung:

1. Elevation. NULL: Dieser Wert setzt die Schattentiefe auf 0 und gibt an, dass auf die Komponente kein Schatten angewendet wird
2. Elevation. EINS: Dieser Wert setzt die Schattentiefe auf 1.
3. Elevation. ZWEI: Dieser Wert setzt die Schattentiefe auf 2.
4. Elevation. DREI: Dieser Wert setzt die Schattentiefe auf 3.
5. Elevation. VIER: Dieser Wert setzt die Schattentiefe auf 4.
6. Elevation. FÜNF: Dieser Wert setzt die Schattentiefe auf 5.

Wenn Sie den obigen Codeblock rendern, wird auf Ihrem Bildschirm ein Bild angezeigt, das so aussieht:

Die Komponenten des Blueprint UI Toolkits lassen sich einfach anpassen. Sie können herkömmliches CSS verwenden um das Erscheinungsbild der Komponenten zu ändern, oder Sie können die bereitgestellten Requisiten verwenden, um ihr Verhalten zu ändern.

Sie können beispielsweise das Erscheinungsbild einer Schaltfläche anpassen, indem Sie a übergeben Klassenname Stütze:

importieren Reagieren aus"reagieren";
importieren { Taste } aus„@blueprintjs/core“;
FunktionApp() {
zurückkehren (



"Klick mich" Klassenname='mein-knopf'/>
 </div>
 );
}
ExportStandard App;

Der obige Codeblock wendet eine benutzerdefinierte Klasse auf die Schaltfläche an, sodass Sie ihr Erscheinungsbild mithilfe von CSS ändern können:

.my-button{
Grenzradius: 10px;
Polsterung: 0.4rem 0.8rem;
}

Wenn Sie diese Stile anwenden, sieht Ihre Schaltfläche etwa so aus:

Die Blueprint-Benutzeroberfläche bietet noch viel mehr

Blueprint UI bietet mehr Komponenten als oben erwähnt, wie z. B. Alert, Popover, Toast usw. Mit den bereitgestellten Informationen können Sie jedoch mithilfe der Blueprint-Benutzeroberfläche eine einfache React-Anwendung erstellen.

Sie können Ihre React-Anwendung mit verschiedenen Methoden gestalten. Sie können traditionelles CSS, SASS/SCSS, Tailwind CSS und CSS in JS-Bibliotheken wie Emotion, gestaltete Komponenten usw. verwenden.