Изградња сложеног корисничког интерфејса у Реацт-у, попут контролне табле, може бити застрашујућа ако то радите од нуле. Срећом, не морате то да радите.
Једна од најбољих библиотека компоненти коју можете да користите је Тремор која вам омогућава да креирате модерне контролне табле у Реацт-у са мало труда. Сазнајте како да користите Тремор да креирате контролне табле у Реацт-у.
Шта је тремор?
Тремор је модерна, отвореног кода, библиотека компоненти корисничког интерфејса ниског нивоа за прављење контролних табли у Реацт-у. Тремор се надограђује на Таилвинд ЦСС, Реацт и Рецхартс (још једна библиотека за цртање заснована на компонентама за Реацт). Поврх тога, користи иконе из Хероицонс-а.
Поседује преко 20 компоненти са свим неопходним елементима за изградњу фантастичног аналитичког интерфејса као што су графикони, картице и елементи за унос. Библиотека укључује мале, модуларне компоненте као што су значке, дугмад, падајући мени и картице, које можете комбиновати да бисте направили пуноправне контролне табле.
Оно по чему се Тремор истиче је то што је веома тврдоглав, тако да све док сте у реду са одлукама библиотеке, можете да покренете контролну таблу професионалног изгледа на поветарцу.
Тремор подржава прилагођавање, наравно, и олакшава то преко Реацт-овог система реквизита.
Како почети са тремором
Старт би креирање нове Реацт апликације помоћу цреате-реацт-апп пакет (или Вите ако је то оно што желите).
Мораћете да већ имате инсталиране Ноде.јс и нпм на вашем систему. Ово можете потврдити покретањем чвор --верзија и онда нпм --версион на командној линији. Ако било која команда недостаје, можете је инсталирати помоћу једноставног процеса; погледајте овај водич за инсталирање Ноде.јс и нпм на Виндовс, на пример.
Подешавање вашег Реацт пројекта са Тремором
- Отворите свој терминал и идите до жељеног директоријума користећи цд команда.
- Трцати нпк цреате-реацт-апп тремор-туториал. Ова команда ће креирати нову Реацт апликацију под називом тремор-туториал на вашем систему у тренутном директоријуму.
- Пребаците се на директоријум апликације покретањем цд тремор-туториал.
- Инсталирајте Тремор у свој Реацт пројекат користећи следећу команду:
нпм инсталл @тремор/реацт - Када инсталирате Тремор, увезите пакет у свој Апп.јс (или маин.јск ако сте користили Вите) додавањем следећег реда на дну вашег увоза:
увоз„@тремор/реацт/дист/есм/тремор.цсс“;
Иако Тремор користи Таилвинд ЦСС, не морате да га инсталирате у своју Реацт апликацију да бисте користили библиотеку. То је зато што Тремор већ има интерно подешен Таилвинд. Међутим, ако желите, погледајте наш водич о инсталирање Таилвинд ЦСС-а у Реацт-у.
Затим инсталирајте Хероицонс у свој пројекат користећи следећу команду:
нпм и хероицонс@1.0.6 @тремор/реацтСада, хајде да уклонимо непотребан код у нашем срц/Апп.јс фајл. Ево нашег стартног кода Апп.јс:
увоз"./Апп.цсс";
увоз„@тремор/реацт/дист/есм/тремор.цсс“;
извозУобичајенофункцијаАпликација() {
повратак (
Наша сјајна Реацт контролна табла</h1>
</div>
);
}
Затим креирајте посвећену компоненте подфолдер у вашем срц фолдер. У томе компоненте фолдер, креирајте нови Дасхбоард.јс датотеку и додајте следећи код:
функцијаКомандна табла() {
повратак<див>Командна табладив>;
}
извозУобичајено Командна табла;
Увезите компоненту контролне табле Апп.јс додавањем следеће изјаве после другог увоза:
увоз Командна табла из"./цомпонентс/Дасхбоард";
На крају, прикажите компоненту у вашој Реацт апликацији додавањем испод х1 елемент.
Креирање контролне табле са тремором
Да бисте креирали комплетну контролну таблу користећи Тремор, уз минималну муку, изаберите један од доступних блокова. Блокови су унапред изграђени распореди састављени од различитих малих модуларних компоненти.
Добра полазна тачка је Треморни блокови одељак који приказује различите типове унапред изграђених блок компоненти које можете да користите. Шкољке распореда, на пример, омогућавају вам да саставите различите компоненте да бисте направили контролну таблу.
Прво додајте следећи код у свој Дасхбоард.јс фајл:
увоз {
картица,
наслов,
текст,
ЦолГрид,
АреаЦхарт,
Прогрес бар,
метрички,
Флек,
} из„@тремор/реаговати“;функцијаКомандна табла() {
повратак (
Контролна табла за продају</Титле>спан> Ово је огледна контролна табла направљена саспан> Тремором.</Тект>спан>п > {/* Главни одељак */спан>} "мт-6"спан>> "х-96"спан> /> </Цард>спан>п> {/* КПИ одељак */спан>} 2спан>} гапКс="гап-к-6"спан> гапИ="гап-и -6"спан> маргинТоп="мт-6"спан>> {/* Чувар места за подешавање висине */спан>} "х-28"спан> /> </Цард> спан> </ЦолГрид>спан> </маин>спан> );}п>извозспан> подразумеваноспан> Контролна табла;п >цоде>пре>Блок љуске садржи различите компоненте које увозите на врху датотеке. Ако прегледате ово у свом претраживачу, видећете само два празна блока.п>Можете да попуните своје блокове унапред изграђеним компонентама Тремора, као што су графикон, картица или табела. Можете да извучете податке из АПИ-ја (РЕСТ или ГрапхКЛ) или да их складиштите у низу објеката директно унутар ваше компоненте.п>Да бисте додали компоненту у свој схелл блок, замените стронг> ред са следећим:п> Перформансе</Титле>спан>Поређење између Продаја и Профит</Тект>спан>п> маргинТоп="мт-4"спан> дата={дата} категорије={[„Продаја“спан>, „Профит“спан>]} датаКеи="Монтх"спан> цолорс={["индиго"спан>, "фуксија"спан>]} валуеФорматтер={ валуеФорматтер} хеигхт="х-80"спан>/>п>цоде>пре>После то, додајте следећи низ пре ваше ретурнстронг> изјаве (ово су подаци које ће приказати главни одељак контролне табле):п> // Подаци за приказ у тхе главни одељакспан>цонстспан> подаци = [ { Месец: „21. јануар“спан>, Продаја: 2890спан>, Профит: 2400спан>, }, { Месец: „Феб 21"спан>, Продаја: 1890спан>, Профит: 1398спан>, }, // ...спан> { Месец: "22. јануар"спан>, Продаја: 3890спан>, Профит: 2980спан>, },];цонстспан> валуеФорматтер = (бројспан>) =>< /спан>п>$ ${Интлспан>.НумберФормат("ус"спан>).формат (нумбер).тоСтринг()};п>цоде>пре>Даље, додајте следећи код у своју датотеку после валуеФорматтерстронг>:п> // Подаци за приказ у КПИ одељакспан>констспан> категорије = [ { наслов: „Продаја“спан>, метрика: "$12,699"спан>, перцентагеВалуе: 15,9спан>, циљ: "$ 80,000"спан>, }, { титле: "Профит"спан>, метрика: "$45,564" спан>, перцентагеВалуе: 36,5спан>, циљ: "$125,000"спан>, }, { титле: „Купци“спан>, метрика: „1,072“спан>, перцентагеВалуе: 53.6спан>, циљ: "2,000"спан>, }, { наслов: „Преглед годишње продаје“спан>, метрика: „201.072 долара“спан>, перцентагеВалуе: 28,7спан>, циљ: "$700,000"спан>, },];цоде>пре>За Низ категоријастронг> објеката, морате да мапирате сваки објекат да бисте приказали податке у засебним компонентама картицестронг>. Прво избришите компоненту картице у одељку КПИ, а затим је замените овим кодом:п> {цатегориес.мап((итемспан>) => спан> ( {итем.титле}</Тект>спан> {итем.метриц}</Метриц> спан> "мт-4"спан>> трунцате={тачноспан>} >{`${итем.перцентагеВалуе}спан>% (${итем.метриц}спан> )`спан>}</Тект>спан> {итем.таргет}</Тект>спан> </Флек>спан>п> перцентагеВалуе={ итем.перцентагеВалуе} маргинТоп="мт-2"спан> /> </Цард>спан>))}п>цоде>пре>И то је то. Направили сте своју прву контролну таблу са Тремором. Погледајте контролну таблу покретањем нпм стартстронг>. Требало би да буде слично снимку екрана изнад.п> Прилагођавање компоненти треморах2>Тремор дозвољава прилагођавање помоћу реквизита. Мораћете да прегледате документацију компоненте коју желите да прилагодите и проверите сва својства укључена са њиховим подразумеваним вредностима.п>На пример, ако имате , можете сакрити к-осу тако што ћете проследити проп сховКСАкис={фалсе}стронг> или променити висину користећи висина={х-40}стронг>. За реквизите који декларишу вредности које се налазе у Таилвинд ЦСС-у, као што су величина, размак, боје и остало, морате да користите услужне класе Таилвинд.п> Са лакоћом правите сложене Реацт контролне таблех2>Захваљујући библиотекама компоненти као што је Тремор, не морате да правите сваки један део вашег корисничког интерфејса од нуле. Коришћење библиотеке као што је Тремор може да вам уштеди време и главобољу креирања сложених корисничких интерфејса који реагују.п>див>див>флоки>