Изградња ваше Реацт апликације са Блуепринт УИ Тоолкитом

Изградња Реацт апликације од нуле може бити дуготрајан и изазован задатак, посебно када су у питању компоненте за стил. Ту нам помаже Блуепринт УИ Тоолкит. Комплет алата је скуп компоненти корисничког интерфејса за вишекратну употребу које вам могу помоћи да креирате доследне и визуелно привлачне интерфејсе за ваше Реацт апликације.

Сазнајте више о основама Блуепринт УИ Тоолкита и како да га користите за прављење једноставне Реацт апликације.

Блуепринт УИ Тоолкит је а Реацт библиотека компоненти корисничког интерфејса. Садржи колекцију унапред направљених компоненти које су једноставне за коришћење и прилагођавање. Можете да користите ове унапред дизајниране компоненте из кутије или да их модификујете тако да одговарају вашим специфичним потребама.

Компоненте Блуепринт УИ Тоолкит-а укључују дугмад, обрасце, модали, навигацију и табеле. Коришћење ових компоненти може вам уштедети време и труд јер не морате да дизајнирате и правите сваку компоненту од нуле.

Да бисте започели са Блуепринт УИ Тоолкитом, мораћете креирајте Реацт апликацију.

Када је ваш пројекат постављен, можете инсталирати Блуепринт УИ Тоолкит користећи било који инсталациони програм Ноде пакета који одаберете. Да бисте инсталирали Блуепринт УИ Тоолкит користећи нпм, покрените следећу команду у свом терминалу:

нпм инсталл @блуепринтјс/цоре

Да бисте уместо тога користили предиво, покрените ову команду:

предиво додати @блуепринтјс/цоре

Када инсталирате Блуепринт УИ Тоолкит, можете користити компоненте по свом избору у вашој Реацт апликацији.

Пре употребе компоненти, укључите ЦСС датотеке из Блуепринт УИ Тоолкит-а:

@увоз"нормализе.цсс";
@увоз„@блуепринтјс/цоре/либ/цсс/блуепринт.цсс“;
@увоз„@блуепринтјс/ицонс/либ/цсс/блуепринт-ицонс.цсс“;

Додавање блока кода изнад у вашу ЦСС датотеку примењује стилове корисничког интерфејса Блуепринт на његове компоненте.

На пример, да бисте својој апликацији додали дугме, користите Дугме компонента из Блуепринт УИ Тоолкита:

увоз Реаговати из"реаговати";
увоз { Дугме } из„@блуепринтјс/цоре“;
функцијаАпликација() {
повратак (



"успех" тект="Кликни ме" икона="Освјежи" мали={истина}/>
 </div>
 );
}
извозУобичајено Апликација;

Овај блок кода додаје дугме вашој апликацији помоћу Дугме саставни део. Тхе Дугме компонента узима реквизите као нпр намера, текст, икона, мали, и велики.

Тхе намера проп дефинише природу дугмета, што се одражава у његовој боји позадине. У овом примеру, дугме има а успех намера која му даје зелену боју позадине. Блуепринт УИ нуди неколико основних намера, укључујући Примарна (Плави), успех (зелен), упозорење (наранџаста), и опасност (црвено).

Можете одредити текст који се појављује унутар дугмета помоћу текст проп. Такође можете додати иконе дугмету помоћу икона проп. Поред икона проп ис тхе ригхтИцон проп, који додаје икону на десну страну дугмета.

На крају, велики и мали боолеан пропс одређују величину дугмета. Тхе велики проп чини дугме већим, док је мали подупирач га чини мањим.

Ранији блок кода ће генерисати дугме које изгледа овако:

Такође можете користити АнцхорБуттон компоненту за креирање дугмета у вашој апликацији. Тхе АнцхорБуттон компонента је специјализована верзија компоненте дугмета која је експлицитно дизајнирана за употребу као веза.

Ова компонента прихвата многе исте реквизите као компонента дугмета, укључујући текст, велики, мали, намера, и икона. Такође прихвата хреф и циљ реквизити.

Тхе хреф проп наводи УРЛ на који се дугме везује и циљ проп специфицира циљни прозор или оквир за везу:

увоз Реаговати из"реаговати";
увоз { АнцхорБуттон } из„@блуепринтјс/цоре“;
функцијаАпликација() {
повратак (



 хреф=" https://example.com/"
 намера="Примарна"
 тект="Кликни ме"
 таргет="_бланк"
 />
 </div>
 );
}
извозУобичајено Апликација;

Овај блок кода изнад приказује ан АнцхорБуттон саставни део. Компонента хреф вредност проп је “ https://example.com/” анд тхе циљ вредност проп је „_бланк“ што значи да ће се веза отворити у другој картици или прозору прегледача.

Још једна битна компонента Блуепринт УИ Тоолкита је Цард саставни део. Ово је компонента за вишекратну употребу која приказује информације на привлачан визуелни начин.

Компонента картице заузима два реквизита интерактивни и надморска висина. Тхе надморска висина проп контролише дубину сенке картице, са вишим вредностима које производе израженији ефекат сенке.

Тхе интерактивни проп прихвата логичку вредност. Када је постављено на тачно, омогућава интеракције лебдења и клика на картици, омогућавајући јој да одговори на кориснички унос.

На пример:

увоз Реаговати из"реаговати";
увоз { Цард, Елеватион } из„@блуепринтјс/цоре“;
функцијаАпликација() {
повратак (



истина} елеватион={Висина. ТВО}>
Ово је картица</h2>


Ово је неки садржај ин моја карта</p>
 </Card>
 </div>
 );
}
извозУобичајено Апликација;

У овом примеру, Цард компонента има наслов и неки садржај. Тхе интерактивни проп је постављен на истина.

Такође увозите Надморска висина компонента из @блуепринтјс/цоре. Тхе Надморска висина компонента је енум који дефинише скуп унапред дефинисаних вредности које можете користити да поставите дубину сенке компоненте.

Ево доступних вредности за Надморска висина енум:

1. Надморска висина. НУЛА: Ова вредност поставља дубину сенке на 0, што указује да компонента нема примењену сенку
2. Надморска висина. ЈЕДАН: Ова вредност поставља дубину сенке на 1.
3. Надморска висина. ДВА: Ова вредност поставља дубину сенке на 2.
4. Надморска висина. ТРИ: Ова вредност поставља дубину сенке на 3.
5. Надморска висина. ЧЕТИРИ: Ова вредност поставља дубину сенке на 4.
6. Надморска висина. ФИВЕ: Ова вредност поставља дубину сенке на 5.

Приказивање блока кода изнад ће приказати слику на вашем екрану која изгледа овако:

Компоненте Блуепринт УИ Тоолкита се лако прилагођавају. Можете користити традиционални ЦСС да бисте изменили изглед компоненти, или можете користити обезбеђене реквизите да промените њихово понашање.

На пример, можете да прилагодите изглед дугмета преношењем а Назив класе реквизит:

увоз Реаговати из"реаговати";
увоз { Дугме } из„@блуепринтјс/цоре“;
функцијаАпликација() {
повратак (



"Кликни ме" цлассНаме='моје дугме'/>
 </div>
 );
}
извозУобичајено Апликација;

Горњи блок кода примењује прилагођену класу на дугме, омогућавајући вам да измените његов изглед користећи ЦСС:

.ми-дугме{
граница-радијус: 10пк;
паддинг: 0.4рем 0.8рем;
}

Примена ових стилова ће довести до тога да ваше дугме изгледа овако:

Има много више у корисничком интерфејсу Блуепринт

Блуепринт УИ нуди више компоненти него што је горе поменуто, као што су Алерт, Поповер, тост, итд. Међутим, са датим информацијама, можете направити једноставну Реацт апликацију користећи Блуепринт УИ.

Можете да стилизујете своју Реацт апликацију користећи различите методе. Можете да користите традиционални ЦСС, САСС/СЦСС, Таилвинд ЦСС и ЦСС у ЈС библиотекама као што су емоције, стилизоване компоненте итд.