Blueprint UI — це популярний інструментарій React UI, який надає набір повторно використовуваних компонентів і стилів для створення сучасних веб-додатків. Однією з ключових особливостей Blueprint UI є його підтримка створення спливаючих вікон, сповіщень і тостів, які є важливими компонентами для відображення інформації та відгуків користувачам.
Встановлення Blueprint UI
Щоб розпочати роботу з Blueprint UI, вам потрібно спочатку встановити його. Ви можете зробити це за допомогою будь-якого менеджера пакунків на ваш вибір.
Щоб установити його за допомогою npm, менеджера пакетів JavaScript, виконайте таку команду у своєму терміналі:
npm install @blueprintjs/core
Після встановлення Blueprint UI необхідно імпортувати файли CSS із бібліотеки:
@import "normalize.css";
@import "@blueprintjs/core/lib/css/blueprint.css";
@import "@blueprintjs/icons/lib/css/blueprint-icons.css";
Імпортувавши ці файли, ви зможете інтегрувати стилі Blueprint UI із компонентами, які пропонує Blueprint UI.
Створення поповерів за допомогою Blueprint UI
Спливаючі вікна — це спливаючі підказки, які з’являються, коли користувач наводить курсор на елемент або клацає його. Вони надають додаткову інформацію або параметри для користувача.
Щоб створювати спливаючі вікна у вашій програмі React за допомогою Blueprint UI, ви повинні встановити компонент Blueprint UI Popover2.
Для цього запустіть наступний код у своєму терміналі:
npm install --save @blueprintjs/popover2
Обов’язково імпортуйте таблицю стилів пакета у свій файл CSS:
@import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
Після імпорту таблиці стилів ви можете використовувати компонент Popover2 для створення спливаючих зображень у своїй програмі.
Наприклад:
import React from "react";
import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";function App() {
const popoverContent = (
<div>
<h3>Popover Title</h3>
<p>This is the content inside the popover.</p>
</div>
);return (
<div>
<Popover2 content={popoverContent}>
<Button intent="success" text="Click Me" />
</Popover2>
</div>
);
}export default App;
Цей код створює спливаюче вікно за допомогою компонента Popover2. Він також визначає змінну popoverContent, яка містить код JSX для вмісту popover.
Компонент Popover2 приймає popoverContent як значення свого вмісту. Опис вмісту визначає вміст, який відображається в спливному вікні. Тут компонент Popover2 обгортає компонент Button. Це спричиняє відображення спливаючого вікна, коли ви натискаєте кнопку.
Повернення виглядає просто, як показано тут:
Ви можете стилізувати спливаючий вміст, передавши властивість className до коду popoverContent JSX:
const popoverContent = (
<div className="popover">
<h3>Popover Title</h3>
<p>This is the content inside the popover.</p>
</div>
);
Потім ви можете визначити клас CSS у своєму файлі CSS:
.popover {
padding: 1rem;
background-color: #e2e2e2;
font-family: cursive;
}
Тепер поповер має виглядати трохи краще:
Компонент Popover2 використовує деякі властивості, які допоможуть вам налаштувати його відповідно до ваших потреб. Деякі з цих атрибутів: popoverClassName, onInteraction, isOpen, minimal і placement.
Проп розміщення визначає бажане положення спливного вікна відносно цільового елемента. Його доступні значення:
- авто
- авто старт
- автозавершення
- зверху
- топ-старт
- топовий
- дно
- нижній початок
- нижній кінець
- правильно
- правий початок
- правий кінець
- зліва
- ліворуч-початок
- лівий кінець
За допомогою popoverClassName ви можете визначити назву класу CSS для елемента popover. Ви спочатку створите клас CSS у своєму файлі CSS, щоб використовувати проп.
Наприклад:
.custom-popover {
background-color: #e2e2e2;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
border-radius: 12px;
padding: 1rem;
}
Після створення класу CSS використовуйте властивість popoverClassName, щоб застосувати настроюваний стиль до компонента Popover2:
<Popover2
content={popoverContent}
placement="bottom-end"
popoverClassName="custom-popover"
minimal={true}
>
<Button intent="success" text="Click Me" />
</Popover2>
Мінімальний реквізит контролює стиль спливаючих зображень. Проп приймає логічне значення. Якщо встановлено значення «true», спливаюче зображення матиме мінімальний стиль, не матиме стрілок і матиме простий зовнішній вигляд.
Створення сповіщень
Сповіщення – це повідомлення, які з’являються на екрані, щоб повідомити користувача про важливу інформацію або дії. Вони зазвичай використовуються для відображення повідомлень про помилки, повідомлень про успіх або попереджень.
Створення сповіщень у Blueprint UI подібне до створення сповіщень за допомогою Chakra UI. Ви будете використовувати компонент Alert, щоб створити сповіщення у своїй програмі React за допомогою Blueprint UI.
Ось приклад:
import React from "react";
import { Alert, Button } from "@blueprintjs/core";function App() {
const [isOpen, setIsOpen] = React.useState(false);const handleOpen = () => {
setIsOpen(true);
};const handleClose = () => {
setIsOpen(false);
};return (
<div>
<Alert isOpen={isOpen} onClose={handleClose} confirmButtonText="Close">
<p>This is an alert message</p>
</Alert><Button text="Click Me" intent="success" onClick={handleOpen} />
</div>
);
}export default App;
У цьому прикладі показано, як потрібно імпортувати компонент Alert із пакета @blueprintjs/core. Компонент Alert виводить на екран сповіщення. Також потрібні три властивості: isOpen, onClose і confirmButtonText.
Опис isOpen визначає, чи є сповіщення видимим чи ні. Встановіть значення true, щоб відобразити сповіщення, і false, щоб приховати його. Проп onClose — це функція зворотного виклику, яка запускається, коли користувач закриває сповіщення.
Нарешті, властивість confirmButtonText визначає текст, який відображається на кнопці підтвердження.
Сповіщення про сповіщення в цьому прикладі виглядатиме так:
Створення тостів за допомогою Blueprint UI
Тости – це сповіщення, які з’являються на екрані, щоб повідомити користувача про важливу інформацію чи події. Вони схожі на сповіщення, але зазвичай менш нав’язливі та швидко зникають.
Щоб створити тост у вашій програмі React за допомогою Blueprint UI, використовуйте компонент OverlayToaster. Компонент OverlayToaster створює екземпляр Toaster, який потім використовується для створення окремих тостів.
Наприклад:
import React from "react";
import { OverlayToaster, Button } from "@blueprintjs/core";const toasterInstance = OverlayToaster.create({ position: "top-right" });
function App() {
const showToast = () => {
toasterInstance.show({
message: "This is a toast",
intent: "primary",
timeout: 3000,
isCloseButtonShown: false,
icon: "bookmark",
});
};return (
<div>
<Button text="Click Me" intent="success" onClick={showToast} />
</div>
);
}export default App;
У наведеному вище блоці коду використовується метод OverlayToaster.create для створення екземпляра тостера та вказується його положення за допомогою властивості position.
Він також визначає функцію showToast. Ця функція використовує метод show екземпляра toasterInstance для відображення тосту під час виклику. Метод show приймає об’єкт із повідомленням, наміром, тайм-аутом, isCloseButtonShown і атрибутами значка.
Проп повідомлення визначає текстовий вміст підказки, тоді як властивість наміру вказує тип підказки. Стиль тосту буде різним залежно від його значення.
Ви можете контролювати, як довго відображатиметься сповіщення, використовуючи параметр тайм-аут. Опис icon визначає елемент icon для відображення у тості. За допомогою властивості isCloseButtonShown ви можете керувати відображенням кнопки закриття у тості.
Наведений вище блок коду створить гарний тост, коли ви натиснете кнопку, як показано на зображенні нижче.
Якщо ви прагнете створити привабливі сповіщення у своєму додатку React, Blueprint UI — чудовий варіант. Він надає широкий спектр попередньо визначених компонентів, які можна використовувати для створення сповіщень, що відповідають стилю вашої програми.
Однак, якщо ви працюєте над невеликим проектом, якому не потрібні всі функції Blueprint UI, React Toastify — це легка альтернатива створенню красивих сповіщень.
Покращення взаємодії з користувачем за допомогою тостів, спливаючих повідомлень і сповіщень
Ви навчилися створювати спливаючі повідомлення, сповіщення та тости у своїй програмі React за допомогою Blueprint UI. Ці компоненти мають важливе значення для надання інформації та зворотного зв’язку користувачам і можуть значно покращити взаємодію з користувачем вашої програми. Ви можете легко створити ці компоненти, використовуючи інформацію, яку ви отримали, з мінімальними зусиллями та налаштуваннями.