Angular material - implementacja własnych mat ikon
Stronę tą wyświetlono już: 1999 razy
Wstęp i instalacja modułu materiala
Angular posiada szereg ogólnodostępnych paczek, które rozszerzają jego możliwości. Do takich paczek należy @angular/material. Zainstalowanie tej paczki wymaga wpisania w konsoli:
npm install --save @angular/material @angular/cdk @angular/animations hammerjs --save
dzięki czemu paczka z repozytorium zostanie zainstalowana lokalnie w projekcie. Opcja --save sprawi, że zapisane zostaną w pliku package.json informacje o konieczności zainstalowania tej paczki przy wpisaniu polecenia:
npm install
którego używa się zawsze po ściągnięciu repozytorium czyjegoś projektu. Polecenie to instaluje wszystkie niezbędne zależności właśnie na podstawie danych zawartych w pliku package.json.
Warto też zwrócić uwagę na fakt, że zależności w pliku package.json są podzielone na dwie sekcje:
- dependencies - zależności dla wersji produkcyjnej projektu;
- devDependencies - zależności instalowane tylko dla wersji developersiekiej;
W następnym kroku należy dodać materiala do projekut:
ng add @angular/material --save
Co spowoduje wyświetlenie opcji:
? Choose a prebuilt theme name, or "custom" for a custom theme: (Use arrow keys) > Indigo/Pink [ Preview: https://material.angular.io?theme=indigo-pink ] Deep Purple/Amber [ Preview: https://material.angular.io?theme=deeppurple-amber ] Pink/Blue Grey [ Preview: https://material.angular.io?theme=pink-bluegrey ] Purple/Green [ Preview: https://material.angular.io?theme=purple-green ] Custom
związanych z domyślnym stylem kontrolek materiala.
Tworzenie modułu importu
Teraz warto utworzyć sobie oddzielny moduł, w którym będą umieszczane importy wszystkich materialowych modułów. W tym celu w konsoli z poziomu folderu src/app wpisuję:
ng g m material
by następnie po chwili lub co najwyżej dwóch móc zaimportować moduł MatIconModule. Po modyfikacjach mój plik material.module.ts będzie wyglądał następująco:
Konieczne jest jeszcze zaimportowanie tego modułu w module głównym (w moim przypadku) a w bardziej rozbudowanym projekcie utworzony moduł materiala powinien zostać zaimportowany do każdego podmodułu, który będzie korzystał z materialowych komponentów.
Osadzanie standardowych ikon oraz rejestracja i osadzanie własnych ikon
Osadzanie podstawowych ikon
Po tych czynnościach można już przejść do dodania własnej ikonki. Zanim jednak to uczynię pragnę nadmienić, iż material ma własny wbudowany zestaw ikonek, które można znaleźć na stronie material.io/resources/icons. W celu użycia domyślnych ikon wystarczy napisać w kodzie HTML:
Konieczne będzie jeszcze doinstalowanie owych ikon:
npm install material-design-icons --save
gdzie jak nie trudno się domyślić done_outline jest znacznikiem używanym do wstawienia jednej z domyślnych ikon. Znacznik ten można znaleźć na wcześniej wspomnianej stronie, która zawiera opis wszystkich dostępnych ikonek.
Przygotowanie i rejestracja własnych ikon
Ikony powinny być grafikami SVG z tego względu, że takie ikony po ustawieniu im koloru w stylu komponentu mat-icon będą zmieniały swój kolor wypełnienia. Jest jednak pewien haczyk. Otóż elementy graficzne zawarte w twojej ikonce będą zmieniały kolor jedynie wtedy, gdy elementy w niej osadzone nie będą miały nadanych styli wypełnienia. Jeżeli więc chcesz osadzić swój mały plik SVG utworzony np. w Inkscap-ie to musisz pousuwać te style. Oto przykład ścieżki zawartej w pliku SVG posiadającej style wypełnienia:
Po wyeliminowaniu styli:
Jak widać usunąłem nie potrzebny mi atrybut id oraz atrybut styli style.
Teraz, aby możliwe było zarejestrowanie własnych ikon trzeba dodać moduł HttpClientModule, który ja importuję w module głównym app.module.ts:
Teraz można zarejestrować własną ikonkę w pliku komponentu głównego app.component.ts:
Osadzenie ikonki w kodzie:
Zmiana koloru ikonki:
Repozytorium na GitHub-ie zawierające wszystko, co potrzebne utworzenia własnych mat ikonek można znaleźć tutaj.
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie IV
Autor:
Adam Freeman
Tytuł:
Angular. Programowanie z użyciem języka TypeScript. Wydanie II
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
ASP.NET Core, Angular i Bootstrap. Kompletny przybornik front-end developera
Autor:
Simone Chiaretta
Tytuł:
Angular instalacja i działanie. Nauka krok po kroku
Autor:
Shyam Seshadri
Tytuł:
Angular w akcji
Autor:
Jeremy Wilken
Tytuł:
ASP.NET Core 2 i Angular 5. Przewodnik dla Full-Stack Web Developera
Autor:
Valerio De Sanctis
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie II
Autor:
Adam Freeman
Tytuł:
Angular 2. Programowanie z użyciem języka TypeScript
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
Angular 2. Tworzenie interaktywnych aplikacji internetowych
Autor:
Gion Kunz