Шта је угаони материјал и како га применити?



Овај чланак ће вас упознати са основама угаоног материјала и процедуром за инсталирање и примену различитих УИ / УКС компоненти у Ангулар-у.

УИ / УКС компоненте у Ангулар-у су познате као Угаони материјали. Онипомажу Ангулар Апплицатионс у извођењу ефикасно . Међутим, ако их још увек нисте упознати, ево чланка који ће вам помоћи да детаљно научите Угаоне материјале. Такође, то стекните детаљно знање Ангулар-а, размислите о упису ' из Едуреке.

У овом чланку ћу проћи кроз следеће теме:





Увод у угаоне материјале

Материјали су представљени као језик дизајна који је Гоогле развио 2014. године. Дизајн материјала је алатза фронт-енд оквире, што вам помаже визуелни , кретање , и интеракција дизајн. Такође вам помаже да се прилагодите на различитим уређајима и различитим величинама екрана. Прво је означено са АнгуларЈС да би ове апликације учиниле још бољим атрактиван и изводе брже . Тада је Гоогле у потпуности преписао код из почетка и уклонио ЈС тј. , и именовао га у септембру 2016. Касније је Гоогле означио Материал Десигн на Ангулар, који користи , и назвао га Ангулар Материалс.



Лого Угаони материјал - Угаони материјал - Едурека

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



Уградња угаоног материјала

Сада, кренимо са кратким упутством о томе како да инсталирате кутне материјале. Прво, прво проверите да ли је у вашем систему инсталиран Ангулар. Ако нисте упознати са Ангулар-ом, погледајте везу на . Када све поставите, можете да додате Ангулар Материалс у свој пројекат помоћу следеће наредбе:

од адд @ ангулар / материал

Прво ће вас тражити да одаберете унапред изграђено име теме или прилагођену тему.

Треба да изаберете унапред изграђену тему „Индиго / Пинк“ која је задата тема за обликовање ваше апликације. Такође можете одабрати тему „Прилагођено“ тако да можете прилагодити датотеке тема које укључују све уобичајене стилове.

Даље ће тражити да подесите ХаммерЈС . ХаммерЈС је популарна библиотека која се углавном користи у апликацији Ангулар. Додаје подршку за покрете додиром попут превлачења, померања, увлачења, ротирања и многих других, посебно у мобилним апликацијама.

Можете одабрати „Да“ или „Не“. ХаммерЈС може бити користан када своју апликацију користите на мобилним телефонима. Како мобители нуде додирне екране, ови покрети су кориснији и могу изгледати модерно у вашој мобилној апликацији.

Након што одаберете свој избор, од вас ће се тражити да подесите Анимације прегледача за угаони материјал.

Морате да одаберете „Да“ да бисте могли да користите анимације у својој апликацији. Угаоне анимације чине вашу апликацију забавнијом и лакшом за употребу. Ово може побољшати вашу апликацију и корисничко искуство које привлачи пажњу корисника.

Након тога, ово ће инсталирати Ангулар Материалс у вашу апликацију.

Компоненте угаоног материјала

Као што је раније поменуто, Кутне компоненте материјала нису ништа друго до УИ / УКС Компоненте дизајна. Садрже различит распон компонената попут контрола обрасца, навигације, дугмади и индикатори, скочних прозора и многих других. Ове компоненте вам помажу да примените обрасце према спецификацији Материјалног дизајна.

Крећемо напред, погледајмо неколико примера како да примените ове компоненте у својој Ангулар апликацији.

Навигација

Прво ћу разговарати о компонентама у Навигацији.

  • Тоолбар

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

 Водич за кутни материјал 

је контејнер од кутног материјала који се користи за заглавља и наслове. Боја контејнер се може променити помоћу боја имовина.Подразумевано, траке са алаткама користе неутралну боју позадине засновану на тренутној теми, односно светлу или тамну.Можете одабрати три задате теме, а то су: 'Примарни' , 'акценат' , или ‘Упозорити’ .Да бисте користили ову траку са алаткама, прво је требате да увезете у апп.модуле.тс датотека из Ангулар материјала помоћу следеће наредбе:

увези {МатТоолбарМодуле} из '@ ангулар / материал'

Касније морате да додате и овај модул у увоз: [] одељак који се налази у апп.модуле.тс датотека.

увози: [БровсерМодуле, АппРоутингМодуле, БровсерАниматионсМодуле, МатТоолбарМодуле],

За Мат-Тоолбар, морате додати „ МатТоолбарМодуле ”.

Сада, послужимо ваш пројекат помоћу следеће наредбе:

од служити -о

Ово ће отворити ваш пројекат у подразумеваном прегледачу вашег система, као што је приказано доле:

Ако желите да промените боју траке са алаткама по вашем избору, то можете учинити помоћу ЦСС табеле стилова. Показаћу вам пример.

Прво треба да избришете боја својина из контејнера, а затим откуцајте следеће ЦСС код у апп.цомпонент.цсс датотека.

мат-алатна трака {бацкгроунд-цолор: / * боја по вашем избору * / цолор: / * тект-цолор * /}

Сада послужите свој пројекат да бисте видели резултат.

  • Мени

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

 Водич за кутни материјал Мени Подешавања Помоћ

Додајмо мало стајлинга на Мени дугме. Треба да укуцате следећи код у свој апп.цомпонент.цсс датотека.

.простор {флекс: 1 1 ауто} .бтнс {ширина: 100пк висина: 40пк величина фонта: велика ивица-радијус: 10пк ивица: 3пк пуно # 113ц89 позадина-боја: лигхтцорал}

цласс = ”размак” користи се за додавање размака између „Назив траке са алаткама“ и „Опција менија“.

У случају да нисте упознати са ЦСС табелом стилова, можете се обратити нашем блогу на да бисте добили дубину.

Као и Тоолбар, за употребу и контејнере, за увоз треба да следите исти поступак као горе МатМенуМодуле и МатБуттонМодуле од угаони материјал и додајте их у увоз: [] одељак који се налази у апп.модуле.тс датотека.

Одмах послужите свој пројекат за приказ резултата.

Контроле обрасца

Сада ћу разговарати о компонентама у Контроли обрасца.

  • Поље обрасца

Као што и само име говори, Образац-поље се користи за уносе које даје корисник. Најчешће се користи за регистрацију корисника, у апликацији или на веб локацији.

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

 

Контроле обрасца

Име

Као и обично, потребно је да увезете МатФормФиелдМодуле и МатИнпутМодуле и додајте их у увоз: [] одељак који се налази у апп.модуле.тс датотека. Горњи код се обично користи за унос имена као што су „Име“, „Презиме“ итд. Можете чак користити Валидаторе и поље учинити обавезним. На пример, можете га користити за поље Е-пошта. Можете сакрити или открити текст за лозинке. За референцу погледајте доњи код:

Унесите своју адресу е-поште {{гетЕррорМессаге ()}} Унесите лозинку {{сакриј? 'висибилити_офф': 'видљивост'}}

У вашем апп.цомпонент.цсс датотеку, морате додати следећи код:

.екампле-цонтаинер {паддинг-лефт: 50пк}

Сада, у вашем апп.цомпонент.тс датотеку, морате да увезете ФормЦонтрол и Валидатори од @ угаони / облици именик.

увези {ФормЦонтрол, Валидаторс} из '@ ангулар / формс'

Треба да додате чак и текст да бисте приказали грешку унутар следеће класе.

класа извоза АппЦомпонент {емаил = нев ФормЦонтрол ('', [Валидаторс.рекуиред, Валидаторс.емаил]) гетЕррорМессаге () {ретурн тхис.емаил.хасЕррор ('рекуиред')? 'Морате да унесете вредност': тхис.емаил.хасЕррор ('емаил')? 'Није важећа адреса е-поште': ''} сакриј = тачно}

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

увоз {ФормсМодуле, РеацтивеФормсМодуле} из '@ ангулар / формс' увоз {МатИцонМодуле} из '@ ангулар / материал'

Касније морате да додате ове модуле у увоз: [] одељак.

  • Радио дугме

Радио дугмад се обично користе за одабир избора између различитих опција. Можете погледати следећи код за референцу.

За апп.цомпонент.хтмл фајл,

 

Пол

Мушко женски

За апп.цомпонент.цсс фајл,

мат-радио-дугме {Паддинг-лефт: 50пк}

Сада морате да увезете МатРадиоМодуле и додајте га у увоз: [] одељак који се налази у апп.модуле.тс датотека.

Касније је потребно да пројекту служите за приказ резултата.

Крећући се напред, разговараћу о ЦДК-у о кутном материјалу.

Угаони материјал ЦДК

ЦДК, познат и као Компонентни развојни комплет , је библиотека унапред дефинисана понашања у Ангулар Материал, што је скуп алата који примењују заједничко обрасци интеракције и карактеристике апликације . Нема никакав стил специфичан за дизајн материјала. Погледајмо пример ЦДК-а.

  • Текстуално поље

Компонента Текстуално поље пружа услужне програме за рад са пољима за унос текста. Можете да користите ЦДК компоненте на пољу за текст да бисте променили величину уноса. Погледајмо пример како то применити.

За апп.цомпонент.хтмл фајл,

 

Угаони материјал ЦДК

Величина фонта 10пк 12пк 14пк 16пк 18пк 20пк Аутоматско подешавање величине текста

За апп.цомпонент.тс датотеку, прво морате да увезете потребне компоненте.

увоз {ЦдкТектареаАутосизе} из '@ ангулар / цдк / тект-фиелд' импорт {НгЗоне, ВиевЦхилд} из '@ ангулар / цоре' импорт {таке} из 'ркјс / оператора'

Сада требате да укуцате следећи код унутар класе.

Водичи за Мицрософт СКЛ за почетнике
извози класу АппЦомпонент {конструктор (приватни _нгЗоне: НгЗоне) {} @ВиевЦхилд ('аутосизе', {статиц: фалсе}) аутосизе: ЦдкТектареаАутосизе триггерРесизе () {тхис._нгЗоне.онСтабле.пипе (таке (1)) .субсцрибе (( ) = & ампампампгт тхис.аутосизе.ресизеТоФитЦонтент (труе))}}

Даље, треба да увезете МатСелецтМодуле и додајте га у увоз: [] одељак који се налази у апп.модуле.тс датотека.

Коначно, треба да послужите свој пројекат за приказ резултата.

Ово није закључак и постоји неколико других компоненти у угљеним материјалима. Можете их упутити из званични сајт угаоне грађе.

Овим бих желео да завршим свој блог. Надам се да су вам јасне основе угаоног материјала.Ако имате било каквих сумњи или питања у вези са овим чланком, не устручавајте се да их објавите у одељку за коментаре испод.

Ако желите научити све оно што сте управо научили са овог блога, и више о томе Угаона , и усмерите своју каријеру ка искусном програмеру Ангулар, а затим размислите о томе да се пријавите за нашег ' .

Имате питање за нас? Молимо вас да га спомињете у одељку за коментаре овог блога „Угаони материјал“ и јавићемо вам се што је пре могуће.