Budowanie aplikacji reagującej za pomocą Blueprint UI Toolkit

Budowanie aplikacji React od podstaw może być czasochłonnym i trudnym zadaniem, zwłaszcza jeśli chodzi o stylizowanie komponentów. Właśnie wtedy przydaje się Blueprint UI Toolkit. Zestaw narzędzi to zestaw komponentów interfejsu użytkownika wielokrotnego użytku, które mogą pomóc w tworzeniu spójnych i atrakcyjnych wizualnie interfejsów dla aplikacji React.

Poznaj podstawy Blueprint UI Toolkit i dowiedz się, jak go używać do budowania prostej aplikacji React.

Blueprint UI Toolkit to Biblioteka komponentów React UI. Zawiera kolekcję gotowych komponentów, które są łatwe w użyciu i dostosowywaniu. Możesz użyć tych wstępnie zaprojektowanych komponentów od razu po wyjęciu z pudełka lub zmodyfikować je, aby pasowały do ​​​​swoich konkretnych potrzeb.

Komponenty Blueprint UI Toolkit obejmują przyciski, formularze, moduły, nawigację i tabele. Korzystanie z tych komponentów może zaoszczędzić czas i wysiłek, ponieważ nie trzeba projektować i budować każdego komponentu od podstaw.

Aby rozpocząć korzystanie z Blueprint UI Toolkit, musisz to zrobić stworzyć aplikację React.

Po skonfigurowaniu projektu możesz zainstalować Blueprint UI Toolkit przy użyciu dowolnego wybranego instalatora pakietu Node. Aby zainstalować Blueprint UI Toolkit za pomocą npm, uruchom następujące polecenie w swoim terminalu:

npm zainstaluj @blueprintjs/core

Aby zamiast tego użyć przędzy, uruchom to polecenie:

przędza dodaj @blueprintjs/core

Po zainstalowaniu Blueprint UI Toolkit możesz używać wybranych komponentów w swojej aplikacji React.

Przed użyciem komponentów dołącz pliki CSS z Blueprint UI Toolkit:

@import„normalizuj.css”;
@import"@blueprintjs/core/lib/css/blueprint.css";
@import"@blueprintjs/icons/lib/css/blueprint-icons.css";

Dodanie powyższego bloku kodu do pliku CSS powoduje zastosowanie stylów Blueprint UI do jego komponentów.

Na przykład, aby dodać przycisk do aplikacji, użyj metody Przycisk komponent z Blueprint UI Toolkit:

import Reagować z"reagować";
import { Przycisk } z"@blueprintjs/rdzeń";
funkcjonowaćAplikacja() {
powrót (



"powodzenie" tekst="Kliknij" ikona="odświeżać" mały = {PRAWDA}/>
 </div>
 );
}
eksportdomyślny Aplikacja;

Ten blok kodu dodaje przycisk do aplikacji za pomocą Przycisk część. The Przycisk komponent przyjmuje rekwizyty takie jak zamiar, tekst, Ikona, mały, I duży.

The zamiar prop określa naturę przycisku, co odzwierciedla kolor jego tła. W tym przykładzie przycisk ma powodzenie intencja, która nadaje mu zielony kolor tła. Blueprint UI oferuje kilka podstawowych intencji, w tym podstawowy (niebieski), powodzenie (zielony), ostrzeżenie (pomarańczowy) i niebezpieczeństwo (czerwony).

Możesz określić tekst, który pojawia się wewnątrz przycisku za pomocą tekst rekwizyt. Możesz także dodać ikony do przycisku za pomocą Ikona rekwizyt. obok Ikona rekwizyt jest prawoIkona prop, który dodaje ikonę po prawej stronie przycisku.

Wreszcie, duży I mały rekwizyty boolowskie określają rozmiar przycisku. The duży prop powoduje, że przycisk jest większy, podczas gdy mały prop sprawia, że ​​jest mniejszy.

Wcześniejszy blok kodu wygeneruje przycisk, który wygląda tak:

Możesz także skorzystać z tzw Przycisk kotwicy komponent do tworzenia przycisku w aplikacji. The Przycisk kotwicy komponent jest wyspecjalizowaną wersją komponentu Button, zaprojektowaną specjalnie do użycia jako łącze.

Ten komponent akceptuje wiele takich samych rekwizytów jak komponent Button, w tym tekst, duży, mały, zamiar, I Ikona. Akceptuje również tzw href I cel rekwizyty.

The href prop określa adres URL, do którego prowadzi link przycisku, a cel prop określa docelowe okno lub ramkę dla łącza:

import Reagować z"reagować";
import { Przycisk kotwicy } z"@blueprintjs/rdzeń";
funkcjonowaćAplikacja() {
powrót (



 href=" https://example.com/"
 zamiar ="podstawowy"
 tekst="Kliknij"
 cel="_pusty"
 />
 </div>
 );
}
eksportdomyślny Aplikacja;

Powyższy blok kodu renderuje plik Przycisk kotwicy część. Części href wartość rekwizytu to „ https://example.com/” i cel wartość prop to „_blank”, co oznacza, że ​​link otworzy się w innej karcie lub oknie przeglądarki.

Kolejnym istotnym elementem Blueprint UI Toolkit jest Karta część. Jest to komponent wielokrotnego użytku, który wyświetla informacje w atrakcyjny wizualnie sposób.

Komponent Card przyjmuje dwa rekwizyty interaktywny I podniesienie. The podniesienie prop kontroluje głębię cienia karty, przy czym wyższe wartości dają bardziej widoczny efekt cienia.

The interaktywny prop przyjmuje wartość logiczną. Gdy jest ustawiona na wartość true, umożliwia najechanie kursorem i kliknięcie na kartę, umożliwiając jej reagowanie na dane wprowadzane przez użytkownika.

Na przykład:

import Reagować z"reagować";
import { Karta, wysokość } z"@blueprintjs/rdzeń";
funkcjonowaćAplikacja() {
powrót (



PRAWDA} elewacja={Elewacja. DWA}>
To jest karta</h2>


To jest jakaś treść W moja karta</p>
 </Card>
 </div>
 );
}
eksportdomyślny Aplikacja;

W tym przykładzie Karta komponent ma tytuł i pewną zawartość. The interaktywny rekwizyt jest ustawiony na PRAWDA.

Importujesz również plik Podniesienie składnik z @blueprintjs/core. The Podniesienie component to wyliczenie, które definiuje zestaw predefiniowanych wartości, których można użyć do ustawienia głębi cienia komponentu.

Oto dostępne wartości Podniesienie wyliczenie:

1. Podniesienie. ZERO: ta wartość ustawia głębokość cienia na 0, co oznacza, że ​​komponent nie ma zastosowanego cienia
2. Podniesienie. JEDEN: Ta wartość ustawia głębokość cienia na 1.
3. Podniesienie. DWA: Ta wartość ustawia głębokość cienia na 2.
4. Podniesienie. TRZY: Ta wartość ustawia głębokość cienia na 3.
5. Podniesienie. CZTERY: Ta wartość ustawia głębię cienia na 4.
6. Podniesienie. PIĘĆ: Ta wartość ustawia głębię cienia na 5.

Renderowanie powyższego bloku kodu spowoduje wyświetlenie na ekranie obrazu, który wygląda tak:

Komponenty Blueprint UI Toolkit można łatwo dostosować. Możesz użyć tradycyjnego CSS aby zmodyfikować wygląd komponentów lub możesz użyć dostarczonych rekwizytów, aby zmienić ich zachowanie.

Na przykład możesz dostosować wygląd przycisku, przekazując a Nazwa klasy rekwizyt:

import Reagować z"reagować";
import { Przycisk } z"@blueprintjs/rdzeń";
funkcjonowaćAplikacja() {
powrót (



"Kliknij" nazwa klasy=„mój przycisk”/>
 </div>
 );
}
eksportdomyślny Aplikacja;

Powyższy blok kodu stosuje niestandardową klasę do przycisku, umożliwiając modyfikowanie jego wyglądu za pomocą CSS:

.mój-przycisk{
promień granicy: 10piks;
wyściółka: 0.4rem 0.8rem;
}

Zastosowanie tych stylów spowoduje, że przycisk będzie wyglądał mniej więcej tak:

Blueprint UI to znacznie więcej

Blueprint UI oferuje więcej komponentów niż wspomniano powyżej, takich jak Alert, Popover, toast itp. Jednak dzięki dostarczonym informacjom możesz zbudować prostą aplikację React za pomocą Blueprint UI.

Możesz stylizować swoją aplikację React przy użyciu różnych metod. Możesz używać tradycyjnego CSS, SASS/SCSS, Tailwind CSS i CSS w bibliotekach JS, takich jak emocje, stylizowane komponenty itp.