Moonbase Control: Angular Material (ikony)

Zadanie z modułu Angular. Repozytorium zawiera kod startowy aplikacji Moonbase Control dla tej lekcji.

Zadanie

Rozbuduj komponent kart statusowych o dodatkowe elementy wizualne.

1. Rozszerz model danych

• Dodaj do interfejsu StatusCard nową właściwość: icon: string;
• Następnie uzupełnij wszystkie obiekty w tablicy statusCards odpowiednimi nazwami ikon. 💡 Dzięki temu wygląd komponentu będzie wynikał bezpośrednio z przekazanych danych.

2. Dodaj ikonę do komponentu

• Zaimportuj MatIconModule do komponentu Card.
• Dodaj komponent mat-icon do szablonu karty.
• Wyświetl nazwę ikony przy użyciu wartości pola icon. 💡 Sprawdź w dokumentacji Angular Material przykładowe użycie komponentu mat-icon.

3. Dodaj dynamiczną klasę CSS

• Dodaj do elementu karty klasę zależną od nazwy ikony, np.:

class="status-card status-card--{{ card().icon }}"

💡 Dzięki temu każda karta będzie mogła korzystać z własnego wariantu stylów.

4. Dodaj warianty kolorystyczne

Przygotuj osobne style dla każdej karty. W pliku card.scss utwórz mixin SCSS, który przyjmuje nazwę ikony, kolor ikony i kolor tła. Wywołaj go dla każdej karty.

• Nadaj każdej karcie własny kolor.
• Dopasuj kolor ikony do wariantu karty. 💡 Dodanie nowej karty powinno wymagać jedynie uzupełnienia modelu danych oraz zdefiniowania nowego wariantu kolorystycznego.

Jak zacząć

1. Zrób fork tego repozytorium na swoje konto GitHub.
2. Sklonuj swój fork na komputer.
3. Zainstaluj zależności: npm install.
4. Uruchom aplikację: npm start.
5. Jeśli zadanie korzysta z danych z API, uruchom w drugim terminalu mock API: npm run api.

Jak oddać zadanie

1. Zapisz zmiany w commicie i wypchnij je do swojego forka.
2. Otwórz Pull Request z forka do repozytorium mate-academy/angular_additional-styling, do brancha main.
3. Platforma uruchomi review Twojego Pull Requesta.