Vytváranie vašej aplikácie React pomocou súpravy nástrojov Blueprint UI Toolkit

Vytvorenie aplikácie React od začiatku môže byť časovo náročná a náročná úloha, najmä pokiaľ ide o stylingové komponenty. Tu sa hodí Blueprint UI Toolkit. Sada nástrojov je sada opakovane použiteľných komponentov používateľského rozhrania, ktoré vám môžu pomôcť vytvoriť konzistentné a vizuálne príťažlivé rozhrania pre vaše aplikácie React.

Získajte informácie o základoch Blueprint UI Toolkit a o tom, ako ho použiť na vytvorenie jednoduchej aplikácie React.

Blueprint UI Toolkit je a Knižnica komponentov používateľského rozhrania React. Obsahuje kolekciu vopred pripravených komponentov, ktoré sa ľahko používajú a prispôsobujú. Tieto vopred navrhnuté komponenty môžete použiť hneď po vybalení alebo ich upraviť tak, aby vyhovovali vašim špecifickým potrebám.

Medzi komponenty Blueprint UI Toolkit patria tlačidlá, formuláre, modály, navigácia a tabuľky. Používanie týchto komponentov vám môže ušetriť čas a námahu, pretože nemusíte navrhovať a stavať každý komponent od začiatku.

Ak chcete začať s Blueprint UI Toolkit, musíte vytvorte aplikáciu React.

Keď je váš projekt nastavený, môžete nainštalovať Blueprint UI Toolkit pomocou ľubovoľného inštalačného programu balíka Node, ktorý si vyberiete. Ak chcete nainštalovať Blueprint UI Toolkit pomocou npm, spustite v termináli nasledujúci príkaz:

npm install @blueprintjs/core

Ak chcete namiesto toho použiť priadzu, spustite tento príkaz:

pridať priadzu @blueprintjs/core

Po nainštalovaní Blueprint UI Toolkit môžete vo svojej aplikácii React používať komponenty podľa vlastného výberu.

Pred použitím komponentov zahrňte súbory CSS z Blueprint UI Toolkit:

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

Pridaním vyššie uvedeného bloku kódu do súboru CSS sa na jeho komponenty použijú štýly používateľského rozhrania Blueprint.

Napríklad, ak chcete do aplikácie pridať tlačidlo, použite Tlačidlo komponent z Blueprint UI Toolkit:

importovať Reagovať od"reagovať";
importovať { Tlačidlo } od"@blueprintjs/core";
funkciuApp() {
vrátiť (



"úspech" text="Klikni na mňa" ikona="Obnoviť" malý={pravda}/>
 </div>
 );
}
exportpredvolená App;

Tento blok kódu pridá tlačidlo do vašej aplikácie pomocou Tlačidlo komponent. The Tlačidlo komponent berie rekvizity ako napr zámer, text, ikonu, malý, a veľký.

The zámer prop definuje charakter tlačidla, ktorý sa odráža v jeho farbe pozadia. V tomto príklade má tlačidlo a úspech zámer, ktorý mu dáva zelenú farbu pozadia. Blueprint UI ponúka niekoľko základných zámerov vrátane primárny (Modrá), úspech (zelená), POZOR (oranžová) a nebezpečenstvo (červená).

Text, ktorý sa objaví vo vnútri tlačidla, môžete určiť pomocou text rekvizita. Ikony môžete k tlačidlu pridať aj pomocou ikonu rekvizita. Popri tom ikonu rekvizita je rightIcon prop, ktorý pridá ikonu na pravú stranu tlačidla.

Nakoniec, veľký a malý booleovské rekvizity určujú veľkosť tlačidla. The veľký rekvizita zväčšuje tlačidlo, zatiaľ čo malý rekvizita ho zmenší.

Skorší blok kódu vygeneruje tlačidlo, ktoré vyzerá takto:

Môžete tiež použiť AnchorButton komponent na vytvorenie tlačidla vo vašej aplikácii. The AnchorButton komponent je špecializovaná verzia komponentu Button výslovne navrhnutá na použitie ako odkaz.

Tento komponent akceptuje mnoho rovnakých rekvizít ako komponent Button, vrátane text, veľký, malý, zámer, a ikonu. Prijíma tiež href a cieľ rekvizity.

The href prop určuje URL, na ktoré tlačidlo odkazuje, a cieľ prop určuje cieľové okno alebo rámec pre odkaz:

importovať Reagovať od"reagovať";
importovať { AnchorButton } od"@blueprintjs/core";
funkciuApp() {
vrátiť (



 href=" https://example.com/"
 zámer ="primárny"
 text="Klikni na mňa"
 cieľ="_blank"
 />
 </div>
 );
}
exportpredvolená App;

Tento blok kódu vyššie vykresľuje an AnchorButton komponent. komponent href prop hodnota je " https://example.com/” a cieľ hodnota prop je „_blank“, čo znamená, že odkaz sa otvorí na inej karte alebo okne prehliadača.

Ďalšou základnou súčasťou súpravy nástrojov Blueprint UI Toolkit je kard komponent. Ide o opakovane použiteľný komponent, ktorý zobrazuje informácie príťažlivým vizuálnym spôsobom.

Komponent Karta má dve rekvizity interaktívne a nadmorská výška. The nadmorská výška prop ovláda hĺbku tieňa karty, pričom vyššie hodnoty vytvárajú výraznejší tieňový efekt.

The interaktívne prop akceptuje boolovskú hodnotu. Keď je nastavená na hodnotu true, umožňuje interakciu s kurzorom a kliknutím na kartu, čo jej umožňuje reagovať na vstup používateľa.

Napríklad:

importovať Reagovať od"reagovať";
importovať { Card, Elevation } od"@blueprintjs/core";
funkciuApp() {
vrátiť (



pravda} elevation={Elevation. DVA}>
Toto je karta</h2>


Toto je nejaký obsah v moja karta</p>
 </Card>
 </div>
 );
}
exportpredvolená App;

V tomto príklade kard komponent má názov a určitý obsah. The interaktívne rekvizita je nastavená na pravda.

Môžete tiež importovať Nadmorská výška komponent z @blueprintjs/core. The Nadmorská výška komponent je zoznam, ktorý definuje množinu preddefinovaných hodnôt, ktoré môžete použiť na nastavenie hĺbky tieňa komponentu.

Tu sú dostupné hodnoty Nadmorská výška enum:

1. Nadmorská výška. NULA: Táto hodnota nastaví hĺbku tieňa na 0, čo znamená, že komponent nemá aplikovaný žiadny tieň
2. Nadmorská výška. JEDEN: Táto hodnota nastavuje hĺbku tieňa na 1.
3. Nadmorská výška. DVA: Táto hodnota nastavuje hĺbku tieňa na 2.
4. Nadmorská výška. TRI: Táto hodnota nastavuje hĺbku tieňa na 3.
5. Nadmorská výška. ŠTYRI: Táto hodnota nastavuje hĺbku tieňa na 4.
6. Nadmorská výška. PÄŤ: Táto hodnota nastavuje hĺbku tieňa na 5.

Vykreslením bloku kódu vyššie sa na obrazovke zobrazí obrázok, ktorý vyzerá takto:

Komponenty Blueprint UI Toolkit sa dajú ľahko prispôsobiť. Môžete použiť tradičné CSS na úpravu vzhľadu komponentov alebo môžete použiť poskytnuté rekvizity na zmenu ich správania.

Môžete napríklad prispôsobiť vzhľad tlačidla zadaním a className podpera:

importovať Reagovať od"reagovať";
importovať { Tlačidlo } od"@blueprintjs/core";
funkciuApp() {
vrátiť (



"Klikni na mňa" className='my-button'/>
 </div>
 );
}
exportpredvolená App;

Vyššie uvedený blok kódu aplikuje na tlačidlo vlastnú triedu, ktorá vám umožňuje upraviť jeho vzhľad pomocou CSS:

.moje-tlačidlo{
hraničný polomer: 10px;
vypchávka: 0.4rem 0.8rem;
}

Použitie týchto štýlov spôsobí, že vaše tlačidlo bude vyzerať približne takto:

V používateľskom rozhraní Blueprint je toho oveľa viac

Blueprint UI ponúka viac komponentov, ako je uvedené vyššie, ako napríklad Alert, Popover, toast atď. S poskytnutými informáciami však môžete vytvoriť jednoduchú aplikáciu React pomocou používateľského rozhrania Blueprint.

Aplikáciu React môžete upraviť pomocou rôznych metód. Môžete použiť tradičné CSS, SASS/SCSS, Tailwind CSS a CSS v knižniciach JS, ako sú emócie, štylizované komponenty atď.