Chips w Angular Material to komponenty interfejsu użytkownika przedstawiające elementy jako małe, zwykle zaokrąglone etykiety. Służą do prezentowania krótkich informacji, tagów, filtrów, kategorii lub wybranych opcji.
W pytaniu egzaminacyjnym poprawny rysunek to ten, który pokazuje zestaw małych „pastylek” z tekstem, np. Washer/Dryer, Dogs ok, Cats ok. To typowy wygląd komponentu Chip.
Do czego służą Chips?
Chips wykorzystuje się najczęściej do:
- pokazywania tagów lub kategorii,
- prezentowania wybranych opcji,
- filtrowania wyników,
- oznaczania cech obiektu,
- tworzenia list małych, klikalnych elementów.
Przykład użycia
<mat-chip-listbox>
<mat-chip-option>Angular</mat-chip-option>
<mat-chip-option>TypeScript</mat-chip-option>
<mat-chip-option>Material</mat-chip-option>
</mat-chip-listbox>
W starszych wersjach Angular Material można spotkać także składnię:
<mat-chip-list>
<mat-chip>Angular</mat-chip>
<mat-chip>Material</mat-chip>
</mat-chip-list>
Jak rozpoznać Chips na ilustracji?
Komponent Chips wygląda jak grupa małych, poziomych etykiet. Każdy element ma zwykle zaokrąglone rogi, krótki tekst i może być zaznaczalny, usuwalny albo klikalny.
Nie należy mylić Chips z:
- zakładkami, czyli tabsami,
- menu nawigacyjnym,
- kalendarzem date picker,
- przyciskami radio.
Na egzaminie warto zapamiętać definicję: Chips prezentują listę elementów jako zestaw małych, dotykalnych jednostek interfejsu.