Создание приложения React с помощью набора инструментов Blueprint UI

Создание приложения React с нуля может быть трудоемкой и сложной задачей, особенно когда речь идет о стилизации компонентов. Вот где пригодится Blueprint UI Toolkit. Набор инструментов представляет собой набор повторно используемых компонентов пользовательского интерфейса, которые помогут вам создать согласованные и визуально привлекательные интерфейсы для ваших приложений React.

Узнайте об основах набора инструментов Blueprint UI и о том, как использовать его для создания простого приложения React.

Blueprint UI Toolkit — это Библиотека компонентов пользовательского интерфейса React. Он содержит набор готовых компонентов, которые просты в использовании и настройке. Вы можете использовать эти предварительно разработанные компоненты «из коробки» или модифицировать их в соответствии со своими конкретными потребностями.

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

Чтобы начать работу с Blueprint UI Toolkit, вам необходимо создать React-приложение.

После того, как ваш проект настроен, вы можете установить Blueprint UI Toolkit, используя любой выбранный вами установщик пакетов Node. Чтобы установить Blueprint UI Toolkit с помощью npm, выполните в терминале следующую команду:

npm установить @blueprintjs/ядро

Чтобы вместо этого использовать пряжу, выполните эту команду:

пряжа добавить @blueprintjs/core

После того, как вы установили Blueprint UI Toolkit, вы можете использовать выбранные вами компоненты в своем приложении React.

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

@Импортировать"нормализовать.css";
@Импортировать"@blueprintjs/core/lib/css/blueprint.css";
@Импортировать"@blueprintjs/icons/lib/css/blueprint-icons.css";

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

Например, чтобы добавить кнопку в приложение, используйте Кнопка компонент из набора инструментов Blueprint UI:

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



"успех" текст="Нажми на меня" значок ="обновить" маленький = {истинный}/>
 </div>
 );
}
экспортпо умолчанию Приложение;

Этот блок кода добавляет кнопку в ваше приложение с помощью Кнопка компонент. Кнопка компонент принимает реквизиты, такие как намерение, текст, икона, маленький, и большой.

намерение prop определяет природу кнопки, которая отражается в ее цвете фона. В этом примере кнопка имеет успех намерение, которое придает ему зеленый цвет фона. Пользовательский интерфейс Blueprint предлагает несколько основных целей, включая начальный (синий), успех (зеленый), предупреждение (оранжевый) и Опасность (красный).

Вы можете указать текст, который будет отображаться внутри кнопки, с помощью текст опора Вы также можете добавить значки на кнопку с помощью икона опора Наряду с икона опора правая иконка prop, который добавляет значок справа от кнопки.

Наконец, большой и маленький boolean props определяют размер кнопки. большой prop делает кнопку больше, а маленький prop делает его меньше.

Предыдущий блок кода сгенерирует кнопку, которая выглядит следующим образом:

Вы также можете использовать ЯкорьКнопка компонент для создания кнопки в вашем приложении. ЯкорьКнопка Компонент — это специализированная версия компонента Button, специально предназначенная для использования в качестве ссылки.

Этот компонент принимает многие из тех же реквизитов, что и компонент Button, в том числе текст, большой, маленький, намерение, и икона. Он также принимает href и цель реквизит.

href prop указывает URL-адрес, на который ссылается кнопка, и цель prop указывает целевое окно или фрейм для ссылки:

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



 ссылка=" https://example.com/"
 намерение ="начальный"
 текст="Нажми на меня"
 цель="_пустой"
 />
 </div>
 );
}
экспортпо умолчанию Приложение;

Этот блок кода выше отображает ЯкорьКнопка компонент. Компонент href значение реквизита " https://example.com/” и цель значение prop равно «_blank», что означает, что ссылка откроется в другой вкладке или окне браузера.

Еще одним важным компонентом Blueprint UI Toolkit является Карта компонент. Это повторно используемый компонент, который отображает информацию в привлекательной визуальной форме.

Компонент Card принимает два реквизита интерактивный и возвышение. возвышение prop управляет глубиной тени карты, более высокие значения создают более заметный эффект тени.

интерактивный prop принимает логическое значение. Если установлено значение true, он позволяет наводить и щелкать на карточке, позволяя ей реагировать на ввод пользователя.

Например:

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



истинный} высота={Высота. ДВА}>
Это карта </h2>


это какой-то контент в моя карта</p>
 </Card>
 </div>
 );
}
экспортпо умолчанию Приложение;

В этом примере Карта Компонент имеет заголовок и некоторый контент. интерактивный реквизит установлен на истинный.

Вы также импортируете Высота компонент из @blueprintjs/ядро. Высота component — это перечисление, определяющее набор предопределенных значений, которые можно использовать для установки глубины тени компонента.

Вот доступные значения Высота перечисление:

1. Высота. НУЛЬ: это значение устанавливает глубину тени на 0, указывая на то, что к компоненту не применяется тень.
2. Высота. ОДИН: это значение устанавливает глубину тени на 1.
3. Высота. ДВА: Это значение устанавливает глубину тени на 2.
4. Высота. ТРИ: Это значение устанавливает глубину тени на 3.
5. Высота. ЧЕТЫРЕ: Это значение устанавливает глубину тени на 4.
6. Высота. ПЯТЬ: это значение устанавливает глубину тени на 5.

Рендеринг приведенного выше блока кода отобразит на экране изображение, которое выглядит следующим образом:

Компоненты Blueprint UI Toolkit легко настраиваются. Вы можете использовать традиционный CSS чтобы изменить внешний вид компонентов, или вы можете использовать предоставленные реквизиты, чтобы изменить их поведение.

Например, вы можете настроить внешний вид кнопки, передав className опора:

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



"Нажми на меня" имя_класса='моя кнопка'/>
 </div>
 );
}
экспортпо умолчанию Приложение;

Приведенный выше блок кода применяет к кнопке пользовательский класс, позволяющий изменить ее внешний вид с помощью CSS:

.my-кнопка{
радиус границы: 10пикс.;
набивка: 0.4рем 0.8рем;
}

Применение этих стилей приведет к тому, что ваша кнопка будет выглядеть примерно так:

Blueprint UI — это гораздо больше

Пользовательский интерфейс Blueprint предлагает больше компонентов, чем упомянуто выше, таких как оповещение, всплывающее окно, тост и т. д. Однако с предоставленной информацией вы можете создать простое приложение React с помощью пользовательского интерфейса Blueprint.

Вы можете стилизовать свое приложение React, используя различные методы. Вы можете использовать традиционные CSS, SASS/SCSS, Tailwind CSS и CSS в библиотеках JS, таких как эмоции, стилизованные компоненты и т. д.