Простите, чисти елементи на потребителския интерфейс могат да освежат дизайна ви и да добавят нотка качество към уебсайта или приложението ви.

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

Инсталиране на Blueprint UI

За да започнете с Blueprint UI, първо трябва да го инсталирате. Можете да направите това, като използвате всеки мениджър на пакети по ваш избор.

За да го инсталирате с помощта на npm, мениджърът на пакети на JavaScript, изпълнете следната команда във вашия терминал:

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

След като инсталирате Blueprint UI, трябва да импортирате CSS файловете от библиотеката:

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

Като импортирате тези файлове, ще можете да интегрирате стиловете на Blueprint UI с компонентите, които Blueprint UI предлага.

Създаване на Popovers с помощта на потребителски интерфейс на Blueprint

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

За да създадете popovers във вашето приложение React с помощта на Blueprint UI, трябва да инсталирате Blueprint UI Popover2 компонент.

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

npm install --save @blueprintjs/popover2

Уверете се, че сте импортирали листа със стилове на пакета във вашия CSS файл:

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

След като импортирате листа със стилове, можете да използвате Popover2 компонент за създаване на изскачащи съобщения във вашето приложение.

Например:

импортиране Реагирайте от"реагира";
импортиране { Бутон } от"@blueprintjs/core";
импортиране { Popover2 } от"@blueprintjs/popover2";
функцияПриложение() {
конст popoverContent = (




Popover Title</h3>




Това е съдържанието в изскачащия прозорец.</p>
 </div>
 );


връщане (









износпо подразбиране Приложение;

Този код създава изскачащ прозорец с помощта на Popover2 компонент. Той също така определя a popoverContent променлива, която съдържа JSX кода за изскачащото съдържание.

The Popover2 компонентът взема popoverContent като стойността на своята съдържание опора The съдържание prop указва съдържанието, показано в изскачащия прозорец. Ето, Popover2 компонентни обвивки a Бутон компонент. Това кара изскачащия прозорец да се показва, когато щракнете върху бутона.

Popover изглежда просто, както е показано тук:

Можете да стилизирате изскачащото съдържание, като подадете a className опора на popoverContent JSX код:

конст popoverContent = (
"popover">
Popover Title</h3>




Това е съдържанието в изскачащия прозорец.</p>
 </div>
);

След това можете да дефинирате CSS класа във вашия CSS файл:

.popover {
подплата: 1рем;
Цвят на фона: #e2e2e2;
шрифтово семейство: курсив;
}

Сега popover трябва да изглежда малко по-добре:

The Popover2 компонентът използва някои подпори, които ще ви помогнат да го конфигурирате така, че да отговаря на вашите нужди. Някои от тези реквизити са popoverClassName, onInteraction, е отворено, минимален, и поставяне.

The поставяне prop определя предпочитаната позиция на popover спрямо целевия елемент. Наличните му стойности са:

  • Автоматичен
  • автоматично стартиране
  • автоматичен край
  • Горна част
  • топ-старт
  • най-висок клас
  • отдолу
  • долно начало
  • долен край
  • точно
  • дясно начало
  • десен край
  • наляво
  • ляво начало
  • ляв край

С popoverClassName, можете да дефинирате име на CSS клас за popover елемента. Първо ще създадете CSS клас във вашия CSS файл, за да използвате проп.

Например:

.custom-popover {
Цвят на фона: #e2e2e2;
кутия-сянка: 0 10px 15px-3pxrgb(0 0 0 / 0.1);
граница-радиус: 12px;
подплата: 1рем;
}

След като създадете CSS класа, използвайте popoverClassName prop за прилагане на персонализирания стил към компонента Popover2:

 съдържание={popoverContent}
 разположение="долния край"
 popoverClassName="custom-popover"
 минимум={вярно}
>

The минимален prop контролира стила на popover. Пропът приема булева стойност. Ако е зададено на вярно, изскачащият прозорец ще има минимален стил, без стрелка и прост вид на кутия.

Създаване на предупреждения

Сигналите са известия, които се появяват на екрана, за да информират потребителя за важна информация или действия. Те обикновено се използват за показване на съобщения за грешки, съобщения за успех или предупреждения.

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

Ето един пример:

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


конст handleOpen = () => {
 setIsOpen(вярно);
 };


конст handleClose = () => {
 setIsOpen(невярно);
 };


връщане (




"Близо">
Това е предупредително съобщение</p>
 </Alert>




износпо подразбиране Приложение;

Този пример показва как трябва да импортирате Тревога компонент от @blueprintjs/ядро пакет. The Тревога извежда предупредително съобщение на екрана. Освен това са необходими три подпори: е отворено, onClose, и confirmButtonText.

The е отворено prop определя дали предупреждението е видимо или не. Задайте го на true, за да покажете предупреждението, и на false, за да го скриете. The onClose prop е функция за обратно извикване, която се изпълнява, когато потребител затвори предупреждението.

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

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

Създаване на тостове с Blueprint UI

Тостовете са известия, които се появяват на екрана, за да информират потребителя за важна информация или събития. Те са подобни на сигналите, но обикновено са по-малко натрапчиви и изчезват бързо.

За да създадете тост във вашето приложение React с помощта на Blueprint UI, използвайте OverlayToaster компонент. The OverlayToaster компонент създава екземпляр на Toaster, който след това се използва за създаване на индивидуални тостове.

Например:

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


функцияПриложение() {
конст showToast = () => {
 toasterInstance.show({
 съобщение: "Това е тост",
 намерение: "основен",
 таймаут: 3000,
 isCloseButtonShown: невярно,
 икона: "отметка",
 });
 };


връщане (






износпо подразбиране Приложение;

Кодовият блок по-горе използва OverlayToaster.create метод за генериране на екземпляра на тостера и указва неговата позиция с помощта на позиция опора

Той също така определя функцията showToast. Тази функция използва шоу метод на тостеринстанция за показване на тоста при извикване. The шоу методът взема обект с съобщение, намерение, таймаут, isCloseButtonShown, и икона реквизит.

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

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

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

Ако искате да създадете атрактивни тост известия във вашето приложение React, Blueprint UI е страхотна опция. Той предоставя широк набор от предварително дефинирани компоненти, които можете да използвате, за да създавате известия, които отговарят на стила на вашето приложение.

Ако обаче работите върху малък проект, който не изисква всички функции на Blueprint UI, React Toastify е лека алтернатива за създаване на красиви известия.

Подобряване на потребителското изживяване с тостове, изскачащи съобщения и предупреждения

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