Vytváření vaší aplikace React pomocí sady nástrojů Blueprint UI Toolkit

Vytvoření aplikace React od začátku může být časově náročný a náročný úkol, zejména pokud jde o stylingové komponenty. Zde přichází vhod Blueprint UI Toolkit. Sada nástrojů je sada opakovaně použitelných komponent uživatelského rozhraní, které vám mohou pomoci vytvořit konzistentní a vizuálně přitažlivá rozhraní pro vaše aplikace React.

Dozvíte se o základech sady nástrojů Blueprint UI Toolkit a o tom, jak ji používat k vytvoření jednoduché aplikace React.

Blueprint UI Toolkit je a Knihovna komponent uživatelského rozhraní React. Obsahuje kolekci předem vyrobených komponent, které se snadno používají a přizpůsobují. Tyto předem navržené součásti můžete použít ihned po vybalení nebo je upravit tak, aby vyhovovaly vašim specifickým potřebám.

Mezi komponenty Blueprint UI Toolkit patří tlačítka, formuláře, modály, navigace a tabulky. Použití těchto komponent vám může ušetřit čas a námahu, protože nemusíte navrhovat a stavět každou komponentu od začátku.

Chcete-li začít s Blueprint UI Toolkit, budete muset vytvořit aplikaci React.

Jakmile je váš projekt nastaven, můžete nainstalovat Blueprint UI Toolkit pomocí libovolného instalačního programu balíčku Node, který si vyberete. Chcete-li nainstalovat Blueprint UI Toolkit pomocí npm, spusťte ve svém terminálu následující příkaz:

npm install @blueprintjs/core

Chcete-li místo toho použít přízi, spusťte tento příkaz:

příze přidat @blueprintjs/core

Jakmile si nainstalujete Blueprint UI Toolkit, můžete ve své aplikaci React používat komponenty dle svého výběru.

Před použitím komponent zahrňte soubory CSS z Blueprint UI Toolkit:

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

Přidáním bloku kódu výše do souboru CSS se na jeho součásti použijí styly uživatelského rozhraní Blueprint.

Chcete-li například do aplikace přidat tlačítko, použijte Knoflík komponenta z Blueprint UI Toolkit:

import Reagovat z"reagovat";
import { Knoflík } z"@blueprintjs/core";
funkceAplikace() {
vrátit se (



"úspěch" text="Klikni na mě" ikona="Obnovit" malý={skutečný}/>
 </div>
 );
}
vývoznívýchozí Aplikace;

Tento blok kódu přidá do vaší aplikace tlačítko pomocí Knoflík komponent. The Knoflík komponenta přebírá rekvizity jako např úmysl, text, ikona, malý, a velký.

The úmysl prop definuje povahu tlačítka, která se odráží v jeho barvě pozadí. V tomto příkladu má tlačítko a úspěch záměr, který mu dává zelenou barvu pozadí. Blueprint UI nabízí několik základních záměrů včetně hlavní (modrý), úspěch (zelená), Varování (oranžová) a nebezpečí (Červené).

Text, který se objeví uvnitř tlačítka, můžete určit pomocí text podpěra. K tlačítku můžete také přidat ikony pomocí ikona podpěra. Vedle ikona rekvizita je rightIcon prop, který přidá ikonu na pravou stranu tlačítka.

Konečně, velký a malý booleovské rekvizity určují velikost tlačítka. The velký prop dělá tlačítko větší, zatímco malý rekvizita ho zmenšuje.

Dřívější blok kódu vygeneruje tlačítko, které vypadá takto:

Můžete také použít AnchorButton komponentu k vytvoření tlačítka ve vaší aplikaci. The AnchorButton komponenta je specializovaná verze komponenty Button výslovně navržená pro použití jako odkaz.

Tato komponenta přijímá mnoho stejných rekvizit jako komponenta Button, včetně text, velký, malý, úmysl, a ikona. Přijímá také href a cílová rekvizity.

The href prop určuje URL, na které tlačítko odkazuje, a cílová prop určuje cílové okno nebo rámec pro odkaz:

import Reagovat z"reagovat";
import { AnchorButton } z"@blueprintjs/core";
funkceAplikace() {
vrátit se (



 href=" https://example.com/"
 záměr ="hlavní"
 text="Klikni na mě"
 cíl="_prázdný"
 />
 </div>
 );
}
vývoznívýchozí Aplikace;

Tento blok kódu výše vykreslí an AnchorButton komponent. Součástka href hodnota prop je " https://example.com/” a cílová hodnota prop je „_blank“, což znamená, že se odkaz otevře na jiné kartě nebo okně prohlížeče.

Další základní součástí sady nástrojů Blueprint UI Toolkit je Kartu komponent. Jedná se o opakovaně použitelnou součást, která zobrazuje informace přitažlivým vizuálním způsobem.

Komponenta Karta má dvě rekvizity interaktivní a nadmořská výška. The nadmořská výška prop řídí hloubku stínu karty, přičemž vyšší hodnoty vytvářejí výraznější stínový efekt.

The interaktivní prop přijímá booleovskou hodnotu. Je-li nastavena na hodnotu true, umožňuje na kartě interakce najetím a kliknutím, což jí umožňuje reagovat na vstup uživatele.

Například:

import Reagovat z"reagovat";
import { Card, Elevation } z"@blueprintjs/core";
funkceAplikace() {
vrátit se (



skutečný} elevation={Elevation. DVA}>
Toto je karta</h2>


Toto je nějaký obsah v moje karta</p>
 </Card>
 </div>
 );
}
vývoznívýchozí Aplikace;

V tomto příkladu je Kartu komponenta má název a nějaký obsah. The interaktivní rekvizita je nastavena na skutečný.

Můžete také importovat Nadmořská výška komponenta z @blueprintjs/core. The Nadmořská výška komponenta je výčet, který definuje sadu předdefinovaných hodnot, které můžete použít k nastavení hloubky stínu komponenty.

Zde jsou dostupné hodnoty Nadmořská výška výčet:

1. Nadmořská výška. NULA: Tato hodnota nastaví hloubku stínu na 0, což znamená, že komponenta nemá žádný aplikovaný stín
2. Nadmořská výška. JEDEN: Tato hodnota nastaví hloubku stínu na 1.
3. Nadmořská výška. DVA: Tato hodnota nastavuje hloubku stínu na 2.
4. Nadmořská výška. TŘI: Tato hodnota nastaví hloubku stínu na 3.
5. Nadmořská výška. ČTYŘI: Tato hodnota nastaví hloubku stínu na 4.
6. Nadmořská výška. PĚT: Tato hodnota nastaví hloubku stínu na 5.

Vykreslením bloku kódu výše se na obrazovce zobrazí obrázek, který vypadá takto:

Komponenty Blueprint UI Toolkit lze snadno přizpůsobit. Můžete použít tradiční CSS k úpravě vzhledu součástí nebo můžete použít dodané rekvizity ke změně jejich chování.

Například můžete upravit vzhled tlačítka předáním a jméno třídy podpěra:

import Reagovat z"reagovat";
import { Knoflík } z"@blueprintjs/core";
funkceAplikace() {
vrátit se (



"Klikni na mě" className='my-button'/>
 </div>
 );
}
vývoznívýchozí Aplikace;

Výše uvedený blok kódu aplikuje na tlačítko vlastní třídu, která vám umožní upravit jeho vzhled pomocí CSS:

.můj-tlačítko{
hraniční poloměr: 10px;
vycpávka: 0.4rem 0.8rem;
}

Použití těchto stylů způsobí, že vaše tlačítko bude vypadat trochu takto:

V uživatelském rozhraní Blueprint je toho mnohem víc

Blueprint UI nabízí více komponent, než je uvedeno výše, jako je Alert, Popover, toast atd. S poskytnutými informacemi však můžete vytvořit jednoduchou aplikaci React pomocí uživatelského rozhraní Blueprint.

Aplikaci React můžete upravit pomocí různých metod. V knihovnách JS, jako jsou emoce, stylizované komponenty atd., můžete použít tradiční CSS, SASS/SCSS, Tailwind CSS a CSS.