Простые и понятные элементы пользовательского интерфейса могут освежить ваш дизайн и добавить нотку качества вашему веб-сайту или приложению.

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

Установка пользовательского интерфейса Blueprint

Чтобы начать работу с пользовательским интерфейсом Blueprint, вам необходимо сначала установить его. Вы можете сделать это с помощью любого менеджера пакетов по вашему выбору.

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

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

После установки пользовательского интерфейса Blueprint необходимо импортировать файлы CSS из библиотеки:

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

Импортировав эти файлы, вы сможете интегрировать стили пользовательского интерфейса Blueprint с компонентами, предлагаемыми пользовательским интерфейсом Blueprint.

Создание всплывающих окон с использованием пользовательского интерфейса Blueprint

Всплывающие окна — это всплывающие подсказки, которые появляются, когда пользователь наводит курсор мыши на элемент или щелкает его. Они предоставляют дополнительную информацию или опции пользователю.

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

Для этого запустите в терминале следующий код:

установка npm --save @blueprintjs/popover2

Обязательно импортируйте таблицу стилей пакета в свой файл CSS:

@Импортировать"@blueprintjs/popover2/lib/css/blueprint-popover2.css";

После импорта таблицы стилей вы можете использовать Поповер2 компонент для создания всплывающих окон в вашем приложении.

Например:

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




Заголовок всплывающего окна</h3>




Это содержимое всплывающего окна.</p>
 </div>
 );


возвращаться (









экспортпо умолчанию Приложение;

Этот код создает всплывающее окно, используя Поповер2 компонент. Он также определяет popoverContent переменная, которая содержит код JSX для содержимого всплывающего окна.

Поповер2 компонент занимает popoverContent как стоимость его содержание опора содержание prop определяет содержимое, отображаемое во всплывающем окне. Здесь Поповер2 компонент обертывает Кнопка компонент. Это приводит к тому, что всплывающее окно отображается при нажатии кнопки.

Всплывающее окно выглядит просто, как показано здесь:

Вы можете стилизовать содержимое всплывающего окна, передав className опора popoverContent JSX-код:

константа всплывающее содержимое = (
'трещать'>
Заголовок всплывающего окна</h3>




Это содержимое всплывающего окна.</p>
 </div>
);

Затем вы можете определить класс CSS в своем файле CSS:

.трещать {
набивка: 1бэр;
фоновый цвет: #e2e2e2;
семейство шрифтов: скоропись;
}

Теперь всплывающее окно должно выглядеть немного лучше:

Поповер2 Компонент принимает некоторые реквизиты, которые помогут вам настроить его в соответствии с вашими потребностями. Некоторые из этих реквизитов popoverClassName, onInteraction, открыт, минимальный, и размещение.

размещение prop определяет предпочтительное положение поповера относительно целевого элемента. Его доступные значения:

  • авто
  • автоматический старт
  • автоматическое завершение
  • вершина
  • топ-старт
  • Верхний конец
  • нижний
  • начало снизу
  • нижняя часть
  • верно
  • правильный старт
  • правый конец
  • левый
  • левый старт
  • левый конец

С popoverClassName, вы можете определить имя класса CSS для всплывающего элемента. Сначала вы создадите класс CSS в своем файле CSS, чтобы использовать свойство prop.

Например:

.custom-popover {
фоновый цвет: #e2e2e2;
коробка-тень: 0 10пикс. 15пикс.-3pxRGB(0 0 0 / 0.1);
радиус границы: 12пикс.;
набивка: 1бэр;
}

После создания класса CSS используйте popoverClassName prop, чтобы применить пользовательский стиль к компоненту Popover2:

 содержание = {popoverContent}
 размещение ="нижний конец"
 popoverClassName ="пользовательское всплывающее окно"
 минимальный = {истинный}
>

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

Создание оповещений

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

Создание предупреждений в пользовательском интерфейсе Blueprint похоже на создание оповещений с помощью пользовательского интерфейса Chakra. Вы будете использовать компонент оповещения для создания оповещения в приложении React с помощью пользовательского интерфейса Blueprint.

Вот пример:

Импортировать Реагировать от"реагировать";
Импортировать { Оповещение, кнопка } от"@blueprintjs/ядро";
функцияПриложение() {
константа [isOpen, setIsOpen] = React.useState(ЛОЖЬ);


константа дескрипторОткрыть = () => {
 установитьОткрыто(истинный);
 };


константа дескриптор закрытия = () => {
 установитьОткрыто(ЛОЖЬ);
 };


возвращаться (




"Закрывать">
Это предупреждающее сообщение</p>
 </Alert>




экспортпо умолчанию Приложение;

В этом примере показано, как вы должны импортировать Тревога компонент из @blueprintjs/ядро упаковка. Тревога компонент отображает предупреждающее сообщение на экране. Также требуется три реквизита: открыт, при закрытии, и подтвердитьКнопкатекст.

открыт prop определяет, будет ли оповещение видимым или нет. Установите значение true, чтобы отобразить предупреждение, и значение false, чтобы скрыть его. при закрытии prop — это функция обратного вызова, которая запускается, когда пользователь закрывает предупреждение.

Наконец, подтвердитьКнопкатекст prop определяет текст, отображаемый на кнопке подтверждения.

Оповещение в этом примере будет выглядеть так:

Создание тостов с помощью пользовательского интерфейса Blueprint

Тосты — это уведомления, которые появляются на экране для информирования пользователя о важной информации или событиях. Они похожи на оповещения, но обычно менее навязчивы и быстро исчезают.

Чтобы создать всплывающее уведомление в приложении React с помощью пользовательского интерфейса Blueprint, используйте ОверлейТостер компонент. ОверлейТостер Компонент создает экземпляр Toaster, который затем используется для создания отдельных тостов.

Например:

Импортировать Реагировать от"реагировать";
Импортировать { OverlayToaster, кнопка } от"@blueprintjs/ядро";
константа toasterInstance = OverlayToaster.create({ позиция: "в правом верхнем углу" });


функцияПриложение() {
константа показатьтост = () => {
 toasterInstance.show({
 сообщение: «Это тост»,
 намерение: "начальный",
 тайм-аут: 3000,
 isCloseButtonShown: ЛОЖЬ,
 икона: "закладка",
 });
 };


возвращаться (






экспортпо умолчанию Приложение;

В приведенном выше блоке кода используется OverlayToaster.create метод для создания экземпляра тостера и указывает его положение с помощью позиция опора

Он также определяет функцию показатьтост. Эта функция использует показывать метод тостерЭкземпляр отображать тост при вызове. показывать метод принимает объект с сообщение, намерение, тайм-аут, isCloseButtonShown, и икона реквизит.

сообщение prop указывает текстовое содержимое всплывающего уведомления, в то время как намерение prop указывает тип тоста. Стиль тоста будет варьироваться в зависимости от его ценности.

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

Приведенный выше блок кода будет генерировать красивый тост при нажатии на кнопку, как показано на изображении ниже.

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

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

Улучшение взаимодействия с пользователем с помощью тостов, всплывающих окон и предупреждений

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