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

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

Что такое Blueprint UI Toolkit?

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

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

Инструкции по использованию набора инструментов пользовательского интерфейса Blueprint

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

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

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

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

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

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

Использование компонентов в Blueprint UI Toolkit

Прежде чем использовать этот компонент, включите файл CSS из набора инструментов пользовательского интерфейса Blueprint:

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

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

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

импортировать React из «реагировать»; импортировать {Button} из “@blueprintjs/core”; функция приложения () {возврат (); } экспортировать приложение по умолчанию;

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

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

Вы можете указать текст, который будет отображаться внутри кнопки, используя свойство text. Вы также можете добавить значки на кнопку, используя свойство icon. Рядом с иконкой есть правая иконка – добавить иконку справа от кнопки.

Наконец, большие и малые логические свойства определяют размер кнопки. Большое свойство делает узел больше, а маленькое делает узел меньше.

Начальный блок кода создаст такую кнопку:

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

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

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

импортировать React из «реагировать»; импортировать { AnchorButton } из “@blueprintjs/core”; функция приложения () {возврат (); } экспортировать приложение по умолчанию;

Приведенный выше блок кода отображает компонент AnchorButton. Значение атрибута href элемента — ‘, а целевое значение — _blank, что означает, что ссылка откроется в другой вкладке или окне браузера.

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

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

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

Например:

импортировать React из «реагировать»; импортировать { Card, Elevation } из “@blueprintjs/core”; функция Приложение () {возврат (

Это карта

Это некоторый контент в моей карточке

); } экспортировать приложение по умолчанию;

В этом примере компонент Card имеет заголовок и некоторый контент. для интерактивного установлено значение true.

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

Ниже приведены доступные значения меню Elevation:

Elevation.ZERO : это значение устанавливает глубину тени на 0, указывая, что к компоненту не применяются тени.
Elevation.ONE : Это значение устанавливает глубину тени равной 1.
Elevation.TWO : Это значение устанавливает глубину тени равной 2.
Elevation.THREE : Это значение устанавливает глубину тени равной 3.
Elevation.FOUR : Это значение устанавливает глубину тени равной 4.
Elevation.FIVE : Это значение устанавливает глубину тени равной 5.

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

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