Какво представлява ъгловият материал и как да го приложим?

UI / UX компонентите в Angular са известни като Ъглови материали. Тепомагат на Angular Applications да изпълняват ефективно . Ако все още не сте запознати с тях, ето статия, която ще ви помогне да научите подробно ъгловите материали. Също така, to получете задълбочени познания за Angular, помислете за записване в ' от Едурека.

В тази статия ще разгледам следните теми:

• Въведение в ъгловите материали
• Монтаж на ъглови материали
• Ъглови компоненти на материала
  • Навигация
    1. Лента с инструменти
    2. Меню
  • Контроли на формуляри
    1. Поле за формуляр
    2. Радио бутон
• Ъглов материал CDK
  • Текстово поле

Въведение в ъгловите материали

Материали бяха представени като език за дизайн, разработен от Google през 2014 г. Материален дизайн е инструментза интерфейсни рамки, което ви помага с визуална , движение , и взаимодействие дизайн. Той също така ви помага да се адаптирате към различни устройства и различни размери на екрана. Първо, той беше маркиран с AngularJS, за да направи тези приложения повече атрактивен и изпълнява по-бързо . След това Google напълно пренаписа кода от нулата и премахна JS, т.е. , и го кръсти през септември 2016 г. По-късно Google маркира Материалния дизайн на Angular, който използва , и го нарече Ъглови материали.

Ъглови материали или потребителски интерфейс (UI) компоненти ви помагат да проектирате приложението си в a структуриран начин. Те привличат потребителите и го правят по-лесен за достъп елементите или компонентите, налични във вашето приложение. Те също така помагат при проектирането на вашите приложения по атрактивен начин, с уникални стилове и форми . Тези компоненти помагат да направите приложението си повече последователен , бърз , гъвкав и дори дизайн отзивчив уебсайтове.

Монтаж на ъглови материали

Сега, нека започнем с бърз урок за това как да инсталирате ъглови материали. Първо, първо се уверете, че в системата ви е инсталиран Angular. Ако не сте запознати с Angular, вижте връзката на . След като настроите всичко, можете да добавите ъглови материали към вашия проект, като използвате следната команда:

на add @ ъглова / материал

Първо ще поиска да изберете предварително изградено име на тема или персонализирана тема.

Трябва да изберете предварително изградената тема „Indigo / Pink“, която е тема по подразбиране за стилизиране на вашето приложение. Можете също така да изберете темата „По избор“, така че да можете да персонализирате вашите файлове с теми, които включват всички често срещани стилове.

След това ще ви помоли да настроите HammerJS . HammerJS е популярна библиотека, използвана главно в ъгловото приложение. Той добавя поддръжка за жестове с докосване като Swipe, Pan, Pinch, Rotate и много други, особено в мобилните приложения.

Можете да изберете „Да“ или „Не“. HammerJS може да бъде полезен, когато използвате приложението си на мобилни телефони. Тъй като мобилните устройства предлагат сензорни дисплеи, тези жестове са по-полезни и може да изглеждат модерни във вашето мобилно приложение.

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

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

Впоследствие това ще инсталира Angular Materials във вашето приложение.

Ъглови компоненти на материала

Както споменахме по-рано, ъгловите компоненти на материала не са нищо друго освен UI / UX Дизайн компоненти. Те съдържат разнообразна гама от компоненти като контроли за формуляри, навигация, бутони и индикатори, изскачащи прозорци и много други. Тези компоненти ви помагат да внедрите модели според спецификацията на Material Design.

Продължавайки напред, нека да видим няколко примера за това как да внедрите тези компоненти във вашето Angular Application.

Навигация

Първо ще обсъдя компонентите в навигацията.

• Лента с инструменти

Трябва да въведете следния код в app.component.html файл, за да използвате компонента на лентата с инструменти във вашето приложение.

 Урок за ъглови материали 

е контейнер от ъглови материали, който се използва за заглавки и заглавия. Цветът на контейнер може да бъде променен с помощта на цвят Имот.По подразбиране лентите с инструменти използват неутрален цвят на фона въз основа на текущата тема, т.е. светъл или тъмен.Можете да изберете три теми по подразбиране, които са: „Първичен“ , 'акцент' , или ‘Предупреждавам’ .За да използвате тази лента с инструменти, първо трябва да я импортирате в app.module.ts файл от ъглови материали, използвайки следната команда:

импортиране на {MatToolbarModule} от '@ angular / material'

По-късно трябва да добавите и този модул в внос: [] секция, намираща се в app.module.ts файл.

импортира: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],

За Mat-Toolbar трябва да добавите „ MatToolbarModule ”.

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

на сервира -o

Това ще отвори вашия проект в браузъра по подразбиране на вашата система, както е показано по-долу:

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

Първо, трябва да изтриете цвят имот от контейнер и след това въведете следното CSS код в app.component.css файл.

мат-лента с инструменти {background-color: / * цвят по избор * / color: / * text-color * /}

Сега сервирайте проекта си, за да видите резултата.

• Меню

След това ще обсъдя компонента на менюто. Трябва да въведете следния код във вашия app.component.html файл.

 Урок за ъглови материали Настройки на менюто Помощ

Нека добавим малко стил на Меню бутон. Трябва да въведете следния код във вашия app.component.css файл.

.space {flex: 1 1 auto} .btns {ширина: 100px височина: 40px размер на шрифта: голяма граница-радиус: 10px граница: 3px плътен # 113c89 background-color: lightcoral}

class = ”пространство” се използва за добавяне на интервал между „Име на лентата с инструменти“ и „Опция на менюто“.

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

Също като лентата с инструменти за използване и контейнери, трябва да следвате същата процедура, както по-горе, за да импортирате MatMenuModule и MatButtonModule от ъглов материал и ги добавете внос: [] секция, намираща се в app.module.ts файл.

Представете проекта си сега, за да покажете резултата.

Контроли на формуляри

Сега ще обсъдя компонентите в контрола на формуляри.

• Поле за формуляр

Както подсказва името, Form-Field се използва за входове, дадени от потребителя. Най-често се използва за регистрация на потребител, в приложение или уебсайт.

Трябва да въведете следния код в app.component.html файл, за да използвате компонента Form-Field във вашето приложение.

 
Контроли на формуляри
Име

Както обикновено, трябва да импортирате MatFormFieldModule и MatInputModule и ги добавете внос: [] секция, намираща се в app.module.ts файл. Горният код обикновено се използва за въвеждане на имена като „Име“, „Фамилия“ и др. Можете дори да използвате валидатори и да направите полето задължително. Например можете да го използвате за полето E-mail. Можете да скриете или покажете текста за пароли. За справка вижте кода по-долу:

Въведете имейла си {{getErrorMessage ()}} Въведете паролата си {{скрий? 'visibility_off': 'видимост'}}

Във вашия app.component.css файл, трябва да добавите следния код:

.example-container {padding-left: 50px}

Сега във вашия app.component.ts файл, трябва да импортирате FormControl и Валидатори от @ ъглови / форми директория.

импортирайте {FormControl, Validators} от '@ angular / forms'

Трябва дори да добавите текста, за да покажете грешка в следващия клас.

клас за експортиране AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('задължително')? „Трябва да въведете стойност“: this.email.hasError („имейл“)? „Не е валиден имейл“: „„} скрий = вярно}

Позовавайки се на горната процедура, трябва да въведете следния код във вашия app.module.ts файл за импортиране на необходимите модули.

импортиране на {FormsModule, ReactiveFormsModule} от '@ angular / forms' импортиране {MatIconModule} от '@ angular / material'

По-късно трябва да добавите тези модули в внос: [] раздел.

• Радио бутон

Радиобутоните обикновено се използват за избор на избор между различните опции. Можете да проверите следния код за справка.

За app.component.html файл,

 
Пол
Мъж Жена

За app.component.css файл,

мат-радио-бутон {Padding-left: 50px}

Сега трябва да импортирате MatRadioModule и го добавете внос: [] секция, намираща се в app.module.ts файл.

По-късно трябва да сервирате проекта си, за да покажете изхода.

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

Ъглов материал CDK

CDK, известен също като Комплект Dev Kit , е библиотека на предварително дефинирани поведения в Angular Material, което представлява набор от инструменти, които прилагат общи модели на взаимодействие и функции на приложението . Той няма никакъв стил, специфичен за Material Design. Нека да видим пример за CDK.

• Текстово поле

Компонентът Текстово поле предоставя помощни програми за работа с полета за въвеждане на текст. Можете да използвате CDK компоненти в текстовото поле, за да преоразмерите входовете. Нека да видим пример за това как да го приложим.

За app.component.html файл,

 
Ъглов материал CDK
Размер на шрифта 10px 12px 14px 16px 18px 20px Autosize textarea

За app.component.ts файл, първо трябва да импортирате необходимите компоненти.

импортиране на {CdkTextareaAutosize} от „@ angular / cdk / text-field“ импортиране {NgZone, ViewChild} от „@ angular / core“ импортиране {take} от „rxjs / оператори“

Сега трябва да въведете следния код в класа.

разлика между хеш карта и хеш таблица

клас за експортиране AppComponent {конструктор (private _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (( ) = & ampampampgt this.autosize.resizeToFitContent (вярно))}}

След това трябва да импортирате MatSelectModule и го добавете внос: [] секция, намираща се в app.module.ts файл.

И накрая, трябва да обслужвате проекта си, за да покажете резултата.

Това не е заключението и има няколко други компонента в ъгловите материали. Можете да се обърнете към тях от официален уебсайт от ъглови материали.

С това бих искал да завърша блога си. Надявам се да сте наясно с основите на ъгловия материал.Ако имате някакви съмнения или въпроси относно тази статия, не се колебайте да ги публикувате в раздела за коментари по-долу.

Ако искате да научите всичко, което току-що сте научили от този блог, и повече за това Ъглова и насочете кариерата си към опитен Angular Developer, след което помислете за записване за нашия ' .

Имате въпрос към нас? Моля, споменете го в раздела за коментари в този блог „Ъглови материали“ и ние ще се свържем с вас възможно най-скоро.