Изграждане на вашето React приложение с Blueprint UI Toolkit

Създаването на React приложение от нулата може да бъде трудоемка и предизвикателна задача, особено когато става въпрос за компоненти за стилизиране. Това е мястото, където Blueprint UI Toolkit идва на помощ. Инструментариумът е набор от компоненти на потребителския интерфейс за многократна употреба, които могат да ви помогнат да създадете последователни и визуално привлекателни интерфейси за вашите React приложения.

Научете за основите на Blueprint UI Toolkit и как да го използвате, за да създадете просто React приложение.

Blueprint UI Toolkit е a Библиотека с компоненти на потребителския интерфейс на React. Той съдържа колекция от предварително направени компоненти, които са лесни за използване и персонализиране. Можете да използвате тези предварително проектирани компоненти извън кутията или да ги модифицирате, за да отговарят на вашите специфични нужди.

Компонентите на Blueprint UI Toolkit включват бутони, формуляри, модали, навигация и таблици. Използването на тези компоненти може да ви спести време и усилия, тъй като не е необходимо да проектирате и създавате всеки компонент от нулата.

За да започнете с Blueprint UI Toolkit, ще трябва създайте приложение React.

След като вашият проект е настроен, можете да инсталирате Blueprint UI Toolkit, като използвате произволен пакет за инсталиране на Node, който изберете. За да инсталирате Blueprint UI Toolkit с помощта на npm, изпълнете следната команда във вашия терминал:

npm инсталирайте @blueprintjs/core

За да използвате прежда вместо това, изпълнете тази команда:

прежда добавете @blueprintjs/core

След като инсталирате Blueprint UI Toolkit, можете да използвате компонентите по ваш избор във вашето приложение React.

Преди да използвате компонентите, включете CSS файловете от Blueprint UI Toolkit:

@импортиране"normalize.css";
@импортиране"@blueprintjs/core/lib/css/blueprint.css";
@импортиране"@blueprintjs/icons/lib/css/blueprint-icons.css";

Добавянето на кодовия блок по-горе към вашия CSS файл прилага стиловете на потребителския интерфейс на Blueprint към неговите компоненти.

Например, за да добавите бутон към вашето приложение, използвайте Бутон компонент от Blueprint UI Toolkit:

импортиране Реагирайте от"реагира";
импортиране { Бутон } от"@blueprintjs/core";
функцияПриложение() {
връщане (



"успех" текст="Щракни ме" икона="опресняване" малък={вярно}/>
 </div>
 );
}
износпо подразбиране Приложение;

Този кодов блок добавя бутон към вашето приложение с помощта на Бутон компонент. The Бутон компонентът приема подпори като напр намерение, текст, икона, малък, и голям.

The намерение prop определя естеството на бутона, което се отразява в неговия фонов цвят. В този пример бутонът има a успех намерение, което му придава зелен цвят на фона. Blueprint UI предлага няколко основни намерения, включително първичен (син), успех (зелено), внимание (портокал), и опасност (червен).

Можете да укажете текста, който се появява вътре в бутона с текст опора Можете също да добавяте икони към бутона, като използвате икона опора Наред с икона опората е дясна икона prop, което добавя иконата от дясната страна на бутона.

На последно място, голям и малък boolean props определят размера на бутона. The голям prop прави бутона по-голям, докато малък опората го прави по-малък.

По-ранният кодов блок ще генерира бутон, който изглежда така:

Можете също да използвате AnchorButton компонент за създаване на бутон във вашето приложение. The AnchorButton е специализирана версия на компонента Button, изрично предназначена за използване като връзка.

Този компонент приема много от същите подпори като компонента Button, включително текст, голям, малък, намерение, и икона. Той също така приема href и мишена реквизит.

The href prop указва URL адреса, към който препраща бутонът, и мишена prop указва целевия прозорец или рамка за връзката:

импортиране Реагирайте от"реагира";
импортиране { AnchorButton } от"@blueprintjs/core";
функцияПриложение() {
връщане (



 href=" https://example.com/"
 намерение="основен"
 текст="Щракни ме"
 цел="_празно"
 />
 </div>
 );
}
износпо подразбиране Приложение;

Този кодов блок по-горе изобразява AnchorButton компонент. на компонента href стойността на опората е „ https://example.com/” и на мишена стойността на prop е „_blank“, което означава, че връзката ще се отвори в друг раздел или прозорец на браузъра.

Друг основен компонент на Blueprint UI Toolkit е карта компонент. Това е компонент за многократна употреба, който показва информация по привлекателен визуален начин.

Компонентът Card приема две подпори интерактивен и надморска височина. The надморска височина prop контролира дълбочината на сянката на картата, като по-високите стойности създават по-забележим ефект на сянка.

The интерактивен prop приема булева стойност. Когато е зададено на вярно, то позволява взаимодействия с курсора на мишката и щракване върху картата, което й позволява да реагира на въвеждане от потребителя.

Например:

импортиране Реагирайте от"реагира";
импортиране {Карта, надморска височина} от"@blueprintjs/core";
функцияПриложение() {
връщане (



вярно} elevation={Кота. ДВЕ}>
Това е карта</h2>


Това е малко съдържание в моята карта</p>
 </Card>
 </div>
 );
}
износпо подразбиране Приложение;

В този пример, карта компонентът има заглавие и малко съдържание. The интерактивен prop е настроен на вярно.

Вие също импортирате надморска височина компонент от @blueprintjs/ядро. The надморска височина компонент е enum, който дефинира набор от предварително дефинирани стойности, които можете да използвате, за да зададете дълбочината на сянката на компонента.

Ето наличните стойности на надморска височина enum:

1. надморска височина. НУЛА: Тази стойност задава дълбочината на сянката на 0, което показва, че компонентът няма приложена сянка
2. надморска височина. ЕДНО: Тази стойност задава дълбочината на сянката на 1.
3. надморска височина. ДВЕ: Тази стойност задава дълбочината на сянката на 2.
4. надморска височина. ТРИ: Тази стойност задава дълбочината на сянката на 3.
5. надморска височина. ЧЕТИРИ: Тази стойност задава дълбочината на сянката на 4.
6. надморска височина. ПЕТ: Тази стойност задава дълбочината на сянката на 5.

Изобразяването на кодовия блок по-горе ще покаже изображение на вашия екран, което изглежда така:

Компонентите на Blueprint UI Toolkit са лесни за персонализиране. Можете да използвате традиционния CSS за да промените външния вид на компонентите или можете да използвате предоставените подпори, за да промените поведението им.

Например, можете да персонализирате външния вид на бутон, като подадете a className опора:

импортиране Реагирайте от"реагира";
импортиране { Бутон } от"@blueprintjs/core";
функцияПриложение() {
връщане (



"Щракни ме" className="моят бутон"/>
 </div>
 );
}
износпо подразбиране Приложение;

Кодовият блок по-горе прилага персонализиран клас към бутона, което ви позволява да промените външния му вид с помощта на CSS:

.my-бутон{
граница-радиус: 10px;
подплата: 0.4rem 0.8rem;
}

Прилагането на тези стилове ще накара вашия бутон да изглежда малко по следния начин:

Има много повече за Blueprint UI

Blueprint UI предлага повече компоненти от споменатите по-горе, като Alert, Popover, toast и др. Въпреки това, с предоставената информация, можете да създадете просто React приложение, използвайки Blueprint UI.

Можете да стилизирате вашето React приложение, като използвате различни методи. Можете да използвате традиционен CSS, SASS/SCSS, Tailwind CSS и CSS в JS библиотеки като емоция, стилизирани компоненти и др.