Блуепринт УИ је популаран Реацт УИ алат који обезбеђује скуп компоненти и стилова за вишекратну употребу за прављење модерних веб апликација. Једна од кључних карактеристика Блуепринт корисничког интерфејса је његова подршка за креирање искачућих приказа, упозорења и здравица, које су кључне компоненте за приказивање информација и повратних информација корисницима.
Преглед садржаја
Инсталирање корисничког интерфејса Блуепринт
Да бисте започели са Блуепринт УИ, прво ћете морати да га инсталирате. То можете учинити користећи било који менаџер пакета по вашем избору.
Да бисте га инсталирали користећи нпм, ЈаваСцрипт менаџер пакета, покрените следећу команду у свом терминалу:
npm install @blueprintjs/core
Након што инсталирате Блуепринт УИ, морате увести ЦСС датотеке из библиотеке:
@import "normalize.css";
@import "@blueprintjs/core/lib/css/blueprint.css";
@import "@blueprintjs/icons/lib/css/blueprint-icons.css";
Увозом ових датотека, моћи ћете да интегришете Блуепринт УИ стилове са компонентама које нуди Блуепринт УИ.
Креирање искакања помоћу корисничког интерфејса Блуепринт
Поповерс су описи алата који се појављују када корисник пређе мишем преко или кликне на елемент. Они пружају додатне информације или опције за корисника.
Да бисте креирали искачуће поруке у вашој Реацт апликацији користећи Блуепринт УИ, морате инсталирати компоненту Блуепринт УИ Поповер2.
Да бисте то урадили, покрените следећи код у свом терминалу:
npm install --save @blueprintjs/popover2
Обавезно увезите листу стилова пакета у своју ЦСС датотеку:
@import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
Након увоза стилова, можете користити компоненту Поповер2 да бисте креирали искачуће поруке у вашој апликацији.
На пример:
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;
Овај код креира искачући прозор користећи компоненту Поповер2. Такође дефинише променљиву поповерЦонтент, која садржи ЈСКС код за садржај искакања.
Компонента Поповер2 узима поповерЦонтент као вредност свог параметра садржаја. Опсег садржаја специфицира садржај који се приказује у искачућем прозору. Овде компонента Поповер2 обавија компоненту Буттон. Ово узрокује да се искачући прозор прикаже када кликнете на дугме.
Поповер изгледа једноставно, као што је приказано овде:
Можете да стилизујете искачући садржај тако што ћете проследити цлассНаме проп у поповерЦонтент ЈСКС код:
const popoverContent = (
<div className="popover">
<h3>Popover Title</h3>
<p>This is the content inside the popover.</p>
</div>
);
Затим можете дефинисати ЦСС класу у својој ЦСС датотеци:
.popover {
padding: 1rem;
background-color: #e2e2e2;
font-family: cursive;
}
Сада би поповер требало да изгледа мало боље:
Поповер2 компонента има неке реквизите који ће вам помоћи да је конфигуришете тако да одговара вашим потребама. Неки од ових реквизита су поповерЦлассНаме, онИнтерацтион, исОпен, минимал и плацемент.
Подлога за постављање одређује жељену позицију искачућег приказа у односу на циљни елемент. Његове доступне вредности су:
- ауто
- ауто-старт
- ауто-енд
- топ
- топ-старт
- горње стране
- дно
- почетак одоздо
- доњи крај
- јел тако
- десни старт
- десни крај
- лево
- леви старт
- леви крај
Помоћу поповерЦлассНаме можете дефинисати име ЦСС класе за искачући елемент. Прво ћете креирати ЦСС класу у својој ЦСС датотеци да бисте користили проп.
На пример:
.custom-popover {
background-color: #e2e2e2;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
border-radius: 12px;
padding: 1rem;
}
Након креирања ЦСС класе, користите пропс поповерЦлассНаме да примените прилагођени стил на компоненту Поповер2:
<Popover2
content={popoverContent}
placement="bottom-end"
popoverClassName="custom-popover"
minimal={true}
>
<Button intent="success" text="Click Me" />
</Popover2>
Минимални реквизит контролише стил искачућег приказа. Додатак прихвата логичку вредност. Ако је постављено на труе, искачући прозор ће имати минималан стил, без стрелице и једноставан изглед оквира.
Креирање упозорења
Упозорења су обавештења која се појављују на екрану да обавештавају корисника о важним информацијама или радњама. Обично се користе за приказивање порука о грешци, порука о успеху или упозорења.
Креирање упозорења у корисничком интерфејсу Блуепринт је слично креирању упозорења помоћу корисничког интерфејса Цхакра. Користићете компоненту Алерт да креирате упозорење у вашој Реацт апликацији користећи Блуепринт УИ.
Ево примера:
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;
Овај пример показује како морате да увезете компоненту Алерт из пакета @блуепринтјс/цоре. Компонента Алерт приказује поруку упозорења на екрану. Такође су потребна три реквизита: исОпен, онЦлосе и цонфирмБуттонТект.
ИсОпен проп одређује да ли је упозорење видљиво или не. Подесите га на тачно да бисте приказали упозорење и нетачно да бисте га сакрили. ОнЦлосе проп је функција повратног позива која се покреће када корисник затвори упозорење.
Коначно, реквизит цонфирмБуттонТект одређује текст приказан на дугмету за потврду.
Обавештење о упозорењу у овом примеру ће изгледати овако:
Прављење здравица помоћу корисничког интерфејса Блуепринт
Здравице су обавештења која се појављују на екрану да обавештавају корисника о важним информацијама или догађајима. Они су слични упозорењима, али су обично мање наметљиви и брзо нестају.
Да бисте направили здравицу у вашој Реацт апликацији користећи Блуепринт УИ, користите компоненту ОверлаиТоастер. Компонента ОверлаиТоастер креира инстанцу Тостера која се затим користи за креирање појединачних здравица.
На пример:
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;
Блок кода изнад користи методу ОверлаиТоастер.цреате за генерисање инстанце тостера и специфицира њену позицију помоћу позиције пропа.
Такође дефинише функцију сховТоаст. Ова функција користи метод схов тоастерИнстанце да прикаже здравицу када се позове. Метод схов узима објекат са поруком, намером, тимеоутом, исЦлосеБуттонСховн и реквизитима за иконе.
Пропис поруке специфицира текстуални садржај здравице, док пропс намере специфицира тип здравице. Стил тоста ће се разликовати у зависности од његове вредности.
Можете да контролишете колико дуго ће се приказивати обавештење о тосту помоћу параметра временског ограничења. Опсег иконе одређује елемент иконе за приказ у здравици. Помоћу пропса исЦлосеБуттонСховн можете контролисати да ли се дугме за затварање приказује у тосту.
Блок кода изнад ће генерисати прелепу здравицу када кликнете на дугме, као што се види на слици испод.
Ако желите да креирате атрактивна обавештења о здрављу у вашој Реацт апликацији, Блуепринт УИ је одлична опција. Пружа широк спектар унапред дефинисаних компоненти које можете користити за креирање обавештења која одговарају стилу ваше апликације.
Међутим, ако радите на малом пројекту који не захтева све функције корисничког интерфејса Блуепринт, Реацт Тоастифи је лагана алтернатива за креирање прелепих обавештења.
Побољшање корисничког искуства са здравицама, искачућим приказима и упозорењима
Научили сте како да креирате искачуће поруке, упозорења и тостове у вашој Реацт апликацији користећи Блуепринт УИ. Ове компоненте су неопходне за пружање информација и повратних информација корисницима и могу значајно побољшати корисничко искуство ваше апликације. Можете лако да креирате ове компоненте користећи информације које сте добили уз минималан напор и прилагођавање.