{"id":29822,"date":"2024-01-10T13:37:23","date_gmt":"2024-01-10T12:37:23","guid":{"rendered":"https:\/\/nearshore-it.eu\/artykuly\/angular-material-design-wprowadzenie\/"},"modified":"2024-10-03T14:19:11","modified_gmt":"2024-10-03T12:19:11","slug":"angular-material-design-wprowadzenie","status":"publish","type":"post","link":"https:\/\/nearshore-it.eu\/pl\/artykuly\/angular-material-design-wprowadzenie\/","title":{"rendered":"Wprowadzenie do Angular Material design"},"content":{"rendered":"\n
\n

Przejd\u017a do:<\/p>\n

    \n
  1. 1. Jak tworzy\u0107 zachwycaj\u0105ce i funkcjonalne interfejsy?<\/a><\/li>\n
  2. 2. Biblioteka czy framework? Czym jest Angular Material?\u00a0<\/a><\/li>\n
  3. 3. Jak zaimplementowa\u0107 Angular Material w naszej aplikacji?\u00a0<\/a><\/li>\n
  4. 4. Jak korzysta\u0107 z komponent\u00f3w dost\u0119pnych w Angular Material?\u00a0<\/a><\/li>\n
  5. 5. Korzystanie z komponent\u00f3w w szablonach <\/a><\/li>\n
  6. 6. Dostosowanie komponentu do potrzeb aplikacji <\/a><\/li>\n
  7. 7. Jak i od czego zacz\u0105\u0107 nauk\u0119? <\/a><\/li>\n
  8. 8. Jak stworzy\u0107 w\u0142asny motyw w Angular Material? <\/a><\/li>\n
  9. 9. Konfiguracja kolor\u00f3w <\/a><\/li>\n
  10. 10. Dlaczego warto tworzy\u0107 aplikacje z t\u0105 bibliotek\u0105 komponent\u00f3w? <\/a><\/li>\n
  11. 11. Podsumowanie <\/a><\/li>\n <\/ol>\n<\/div>\n\n\n

    Jak tworzy\u0107 zachwycaj\u0105ce i funkcjonalne interfejsy?<\/h2>\n\n\n\n

    Czy zastanawia\u0142o ci\u0119 kiedy\u015b, jak to jest, \u017ce wsp\u00f3\u0142czesne aplikacje internetowe zachwycaj\u0105 swoimi stylowymi, a jednocze\u015bnie funkcjonalnymi interfejsami u\u017cytkownika? C\u00f3\u017c, tajemnica cz\u0119sto tkwi w bibliotekach UI\/UX, a w \u015bwiecie Angulara kr\u00f3luje Angular Material. Jest to kompleksowy zestaw narz\u0119dzi do budowania interfejs\u00f3w, opracowany w duchu Material Design \u2013 zestawu dobrych praktyk projektowania opracowanego przez Google. Jego kluczowymi elementami s\u0105 czytelno\u015b\u0107, sp\u00f3jno\u015b\u0107 i reakcja na interakcj\u0119 u\u017cytkownika, co sprawia, \u017ce jest on przyjazny i \u0142atwy w obs\u0142udze. Zainteresowanych zach\u0119cam do zapoznania si\u0119 z materia\u0142ami i przyk\u0142adami implementacji na stronie https:\/\/material.io\/.<\/a><\/p>\n\n\n\n

    <\/div>\n\n\n
    \n
    \"
    Ikony powinny by\u0107 proste i czytelne, bez zb\u0119dnych efekt\u00f3w 3d   
    \u017ar\u00f3d\u0142o: material.io<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n
    <\/div>\n\n\n
    \n
    \"
    Przyk\u0142ad zastosowania kolor\u00f3w dynamicznych w Material Design 
    \u017ar\u00f3d\u0142o: material.io<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n
    <\/div>\n\n\n\n

    Biblioteka czy framework? Czym jest Angular Material? <\/h2>\n\n\n\n

    Najpro\u015bciej ujmuj\u0105c, to biblioteka UI zawieraj\u0105ca zestaw gotowych do u\u017cycia, wysokiej jako\u015bci komponent\u00f3w dla Angulara. Dzi\u0119ki prostym i przetestowanym API oraz swojej wszechstronno\u015bci i mnogo\u015bci rozwi\u0105za\u0144, biblioteka pozwala na doskona\u0142\u0105 integracj\u0119 i tworzenie \u015bwietnych customowych rozwi\u0105za\u0144. <\/p>\n\n\n\n

    Jak zaimplementowa\u0107 Angular Material w naszej aplikacji? <\/h2>\n\n\n\n

    To proste! Wszystko dzieje si\u0119 automatycznie dzi\u0119ki wspania\u0142emu Angular CLI, dlatego od razu przejd\u017amy do szczeg\u00f3\u0142\u00f3w! Za\u0142\u00f3\u017cmy, \u017ce masz ju\u017c aplikacj\u0119 w Angularze i chcesz wzbogaci\u0107 j\u0105 o Angular Material. Wystarczy, \u017ce w terminalu, w lokalizacji projektu, wpiszesz: <\/p>\n\n\n\n

    ng add @angular\/material <\/pre>\n\n\n\n
    Podczas instalacji mo\u017cesz wybra\u0107 motyw kolorystyczny, ustawi\u0107 globalne style dla typografii oraz zdecydowa\u0107 o w\u0142\u0105czeniu animacji. W nowej aplikacji polecam wybra\u0107 losowy motyw, ustawi\u0107 style dla typografii i w\u0142\u0105czy\u0107 animacje. <\/p>\n\n\n\n
    Pami\u0119taj: W istniej\u0105cej ju\u017c aplikacji unikaj w\u0142\u0105czania styl\u00f3w typograficznych, je\u015bli chcesz zachowa\u0107 wcze\u015bniej przygotowane przez siebie style tekstowe. <\/p>\n\n\n\n
    Po instalacji zauwa\u017cysz, \u017ce \u015bcie\u017cka do pliku CSS wybranego motywu zosta\u0142a dodana do globalnych styl\u00f3w aplikacji w pliku angular.json: <\/p>\n\n\n\n
    \"styles\": [ \n\n              \"@angular\/material\/prebuilt-themes\/indigo-pink.css\", \n\n              \"src\/styles.scss\" \n\n], <\/pre>\n\n\n\n
    Dodatkowo paczka @angular\/material zosta\u0142a dodana do pliku package.json, ikony i fonty zosta\u0142y zaimportowane w pliku index.html, body otrzyma\u0142o klas\u0119 mat-typography i nowe globalne style pojawi\u0142y si\u0119 w pliku styles.css. <\/p>\n\n\n\n
    I to wszystko! Teraz mo\u017cesz zacz\u0105\u0107 bawi\u0107 si\u0119 komponentami. <\/p>\n\n\n\n
    Przeczytaj tak\u017ce:<\/strong> Kt\u00f3ry framework wybra\u0107? Pojedynek gigant\u00f3w: React vs Angular<\/a><\/p>\n\n\n\n
    Jak korzysta\u0107 z komponent\u00f3w dost\u0119pnych w Angular Material? <\/h2>\n\n\n\n
    Angular Material oferuje wachlarz komponent\u00f3w UI, kt\u00f3re s\u0105 elastyczne i \u0142atwe w u\u017cyciu, a przy tym zgodne z wytycznymi Material Design. We\u017amy na przyk\u0142ad prosty przycisk. <\/p>\n\n\n\n
    Importowanie modu\u0142u komponentu <\/h3>\n\n\n\n
    Ka\u017cdy komponent z Angular Material ma sw\u00f3j dedykowany modu\u0142. Dla przycisk\u00f3w b\u0119dzie to MatButtonModule z przestrzeni @angular\/material\/button. <\/p>\n\n\n\n
    Je\u015bli twoja aplikacja jest podzielona na wewn\u0119trzne modu\u0142y, zaimportuj potrzebny modu\u0142 do modu\u0142u, w kt\u00f3rym zamierzasz u\u017cy\u0107 komponentu: <\/p>\n\n\n\n
    mport { MatButtonModule } from '@angular\/material\/button'; \n\n... \n\n@NgModule({ \n\n  declarations: [...], \n\n  imports: [MatButtonModule, ...], \n\n}) \n\nexport class AppModule { } <\/pre>\n\n\n\n
    Je\u015bli korzystasz ze standalone component, wystarczy import bezpo\u015brednio w komponencie: <\/p>\n\n\n\n
    import { MatButtonModule } from '@angular\/material\/button'; \n\n... \n\n@Component({ \n\n  selector: 'app-root', \n\n  standalone: true, \n\n  imports: [MatButtonModule, ...], \n\n  templateUrl: '.\/app.component.html', \n\n  styleUrl: '.\/app.component.scss' \n\n}) \n\nexport class AppComponent { }<\/pre>\n\n\n\n
    Korzystanie z komponent\u00f3w w szablonach <\/h2>\n\n\n\n
    Teraz mo\u017cesz zacz\u0105\u0107 u\u017cywa\u0107 komponent\u00f3w w szablonach HTML. Aby umie\u015bci\u0107 przycisk, wystarczy doda\u0107 odpowiedni tag w pliku HTML. <\/p>\n\n\n\n
    <button mat-button>Kliknij mnie<\/button> <\/pre>\n\n\n\n
    Dzi\u0119ki temu, \u017ce operujesz tutaj na natywnym obiekcie button, mo\u017cesz obs\u0142ugiwa\u0107 wszystkie jego zdarzenia i korzysta\u0107 z niego dok\u0142adnie w taki sam spos\u00f3b, jak bez Angular Material. <\/p>\n\n\n\n
    <button mat-button (click)=\"onClick()\" (focus)=\"onFocus()\" [disabled]=\"isDisabled\">Kliknij mnie<\/button> <\/pre>\n\n\n\n
    Teraz pi\u0119knie ostylowany przycisk znajduje si\u0119 w twojej aplikacji, a ty intuicyjnie wiesz ju\u017c, jak z niego korzysta\u0107. <\/p>\n\n\n\n
    Dostosowanie komponentu do potrzeb aplikacji <\/h2>\n\n\n\n
    Wszystkie komponenty mo\u017cesz ostylowywa\u0107 i konfigurowa\u0107 tak, aby pasowa\u0142y do potrzeb twojej aplikacji. Na przyk\u0142ad przyciski oferuj\u0105 r\u00f3\u017cne style out of the box<\/em>, takie jak basic, raised, stroked, flat, icon, fab czy mini fab. Ka\u017cdemu stylowi dodatkowo mo\u017cesz nada\u0107 kolor: primary, accent, warn \u2013 kt\u00f3re skonfigurowane s\u0105 w wybranym przez ciebie motywie (o czym w dalszej cz\u0119\u015bci artyku\u0142u). <\/p>\n\n\n\n
    <\/div>\n\n\n
    \n
    \"<\/figure>\n<\/div>\n\n\n
    <\/div>\n\n\n\n
    Aby dowiedzie\u0107 si\u0119, jaki modu\u0142 zaimportowa\u0107 oraz w jaki spos\u00f3b konfigurowa\u0107 dany komponent, najlepiej jest zajrze\u0107 do dokumentacji dost\u0119pnej w Internecie. Mo\u017cesz tam pozna\u0107 parametry do konfiguracji komponentu oraz przyk\u0142ady u\u017cycia (wraz z kodem), na kt\u00f3re warto spojrze\u0107 w poszukiwaniu sposobu u\u017cycia lub inspiracji. Dla przycisku b\u0119dzie to strona: Button | Angular Material.<\/a> <\/p>\n\n\n\n
    Natomiast ca\u0142\u0105 list\u0119 dost\u0119pnych komponent\u00f3w podzielonych na kategorie znajdziesz tutaj: Components | Angular Material<\/a>. Zach\u0119cam do przejrzenia listy i pobawienia si\u0119 ka\u017cdym komponentem.  <\/p>\n\n\n\n
    Jak i od czego zacz\u0105\u0107 nauk\u0119? <\/h2>\n\n\n\n
    Moim punktem startowym w nauce by\u0142oby skupienie si\u0119 na tych komponentach, kt\u00f3re znajduj\u0105 najcz\u0119stsze zastosowanie w aplikacjach. Chodzi mi tu przede wszystkim o komponenty s\u0142u\u017c\u0105ce do interakcji z u\u017cytkownikiem \u2013 takie jak przyciski, pola wyboru (checkboxy, selecty, radio buttony), pola tekstowe formularzy \u2013 oraz o te, kt\u00f3re pe\u0142ni\u0105 funkcj\u0119 prezentacji danych, na przyk\u0142ad paski post\u0119pu (progress bary\/spinnery), snackbary czy tabele. <\/p>\n\n\n\n
    Zach\u0119cam do utworzenia w\u0142asnego playgroundu <\/em><\/strong>w Angularze, gdzie krok po kroku mo\u017cesz eksperymentowa\u0107 z ka\u017cdym z wymienionych komponent\u00f3w w praktyce. Angular Material zapewnia dost\u0119p do r\u00f3\u017cnorodnych schemat\u00f3w, kt\u00f3re mo\u017cna wykorzysta\u0107 do generowania kodu. Aby w \u0142atwy spos\u00f3b doda\u0107 proste menu nawigacyjne do aplikacji, skorzystaj z navigation schematic: <\/p>\n\n\n\n
    ng generate @angular\/material:navigation navigation <\/pre>\n\n\n\n
    <\/div>\n\n\n
    \n
    \"<\/figure>\n<\/div>\n\n\n
    <\/div>\n\n\n\n
    Z aplikacj\u0105 przygotowan\u0105 w ten spos\u00f3b i z otwart\u0105 dokumentacj\u0105 Angular Material, przejd\u017a przez wszystkie komponenty, zg\u0142\u0119biaj\u0105c ich funkcje i sposoby wykorzystania. <\/p>\n\n\n\n
    Jak stworzy\u0107 w\u0142asny motyw w Angular Material? <\/h2>\n\n\n\n
    Tworzenie w\u0142asnego motywu w Angular Material to temat, kt\u00f3ry zas\u0142uguje na osobny artyku\u0142. Niemniej, warto wiedzie\u0107, \u017ce Angular Material umo\u017cliwia dostosowanie wygl\u0105du komponent\u00f3w do indywidualnych potrzeb. <\/p>\n\n\n\n
    Przygotowanie motywu dla siebie <\/h3>\n\n\n\n
    Przed przyst\u0105pieniem do tworzenia w\u0142asnego motywu upewnij si\u0119, \u017ce twoje style s\u0105 zapisane w formacie SCSS, a tak\u017ce usu\u0144 z angular.json odniesienie do pliku CSS wybranego wcze\u015bniej motywu. <\/p>\n\n\n\n
    Wprowadzenie i u\u017cycie customowego motywu <\/h3>\n\n\n\n
    Mo\u017cesz to zrobi\u0107, ponownie wywo\u0142uj\u0105c komend\u0119: <\/p>\n\n\n\n
    ng add @angular\/material <\/pre>\n\n\n\n
    Jednak tym razem, przy wyborze motywu, wska\u017c custom. <\/p>\n\n\n\n
    Zaobserwujesz, \u017ce tw\u00f3j plik styles.scss zosta\u0142 wzbogacony o nowe linijki kodu, kt\u00f3re: <\/p>\n\n\n\n