Angular Material dizajn

Uvod u Angular Material

Prilikom pokretanja Angular projekta dobijemo dobru osnovu za razvoj web aplikacija. S obzirom da to podrazumijeva i dobar dizajn važno je odmah na početku odabrati kojim putem će se krenuti. U velikom broju slučajeva dobar izbor je Bootstrap, ali ako želimo nešto u skladu s trenutnim trendovima možemo koristiti još i Angular Material.

Kreiranje Angular projekta

Novi projekt kreiramo koristeći Angular CLI i pokrećemo naredbom

Sada na adresi http://localhost:4200 možemo vidjeti sljedeće

Angular Material dizajn - početna stranica

Instalacija Angular Material paketa

U mapi ranije kreiranog projekta pokrećemo sljedeću naredbu

Instalirali smo tri nova NPM paketa:
@angular/material – službeni Material paket za Angular
@angular/cdk – CDK (Component Development Kit) pruža mogućnost razvoja prilagođenih Angular Material komponenti
@angular/animations – neke komponente ovise o ovome kako bi mogle prikazivati napredne tranzicije

I sada unutar package.json možemo vidjeti sljedeće

Zadane Material teme

Uvod u Angular Material

Angular Material nudi nam mogućnost biranja između nekoliko zadanih tema koje u projekt možemo dodati jednostavnim uvozom unutar datoteke src/styles.css

deeppurple-amber.css – @import ‘~@angular/material/prebuilt-themes/deeppurple-amber.css’;
indigo-pink.css – @import ‘~@angular/material/prebuilt-themes/indigo-pink.css’;
pink-bluegrey.css – @import ‘~@angular/material/prebuilt-themes/pink-bluegrey.css’;
purple-green.css – @import ‘~@angular/material/prebuilt-themes/purple-green.css’;

Material ikone i tipografija

Osim tema imamo mogućnost korištenja i Angular Material ikona kao i tipografije.

Angular Material ikone

To postižemo dodavanjem sljedeće poveznice unutar src/index.html

Podrška za geste

U službenoj dokumentaciji spominje se još u Hammer.JS paket kojega je potrebno dodati u Angular projekt ako se planiraju koristiti komponente kao što su npr. Tooltip i Slider, kako bi se iz njih dobila maksimalna funkcionalnost.

Nakon instalacije potrebno je unutar src/main.ts dodati

Angular Material komponente

Instalacijom ranije navedenih paketa još uvijek nismo sve riješili i naš Angular projekt i dalje nema podršku za korištenje svih Angular Material komponenti.

Ako npr. želimo u projekt dodati npr. Card komponentu moramo unutar njene dokumentacije pronaći API referencu koja će nam to omogućiti.

Angular Material kartica

Za svaku komponentu koju želimo koristiti moramo pronaći pripadajuću API referencu i navesti ju unutar naše app.module.ts datoteke što na kraju može izgledati i ovako:

Ako sada usporedimo sliku izgleda Angular aplikacije s početka ovog blog posta i nakon dodavanja Angular Materiala razlika je jasno vidljiva.

Uvod u Angular Material dizajn

Zaključak

I to je sve. Ovo čak može djelovati i previše jednostavno da bi bilo istinito, ali to je zapravo i cilj korištenja Angular Materiala.

Objavio

Tomislav Stanković

Web developer. Uz to bavi se i temama vezanim uz online reputaciju. Google+

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *