Karty

Karty to przyciski, które zawsze występują w grupach i są zależne od siebie nawzajem: w danym momencie aktywny może być tylko jeden przycisk.

ikona objaśnienia
Komponent przycisków
Przyciski, które nie są kartami, mogą działać niezależnie od innych przycisków.

Anatomia

1. Ikona aktywnej karty
2. Ikona nieaktywnej karty
3. Etykieta aktywnej karty
4. Etykieta nieaktywnej karty

Okular

Karty zagnieżdżone na pasku aplikacji – wyrównane do lewej

ikona objaśnienia
Pasek aplikacji i komponent nagłówka
Specyfikacje, wytyczne dotyczące stylu i inne.

Karty zagnieżdżone na pasku aplikacji – elastyczne wyrównanie

Dzięki elastycznemu wyrównaniu konfiguracja zakładek rozciąga się lub ściska, dopasowując się do dostępnej przestrzeni.

Karty zwinięte na pasku aplikacji – menu szuflady

ikona objaśnienia
Pasek aplikacji i komponent nagłówka
Specyfikacje, wytyczne dotyczące stylu i inne.

Samodzielny pasek kart – wyrównany do lewej

Samodzielny pasek kart – elastyczne wyrównanie

Dzięki elastycznemu wyrównaniu konfiguracja zakładek rozciąga się lub ściska, dopasowując się do dostępnej przestrzeni.

Przepełnienie ciągu etykiety karty

Skalowanie układów

Te układy referencyjne pokazują, jak dostosować zakładki do ekranów o różnych szerokościach i wysokościach. Należy pamiętać, że wszystkie wartości pikseli podano w pikselach renderowanych, przed jakimkolwiek próbkowaniem w dół lub w górę.

Ekrany standardowe i szerokie w segmencie o niskiej wysokości

Ekrany standardowe i szerokie w standardowym przedziale wysokości

Standardowe i szerokie ekrany w segmencie wysokich wysokości

Ekrany bardzo szerokie i super szerokie we wszystkich przedziałach wysokości

Style

Typografia

Styl czcionki Krój pisma Waga Rozmiar (dp)
Korpus 3 M Roboto Średni 24
Ciało 3 Roboto Regularny 24

Kolor

Element Kolor (tryb dzienny) Kolor (tryb nocny)
Typ podstawowy / ikony Biały Biały @ 88%
Typ drugorzędny / ikony Biały @ 72% Biały @ 60%
Tło paska kart Czarny Czarny
Tło paska kart podczas przewijania Czarny @ 84% Czarny @ 88%
Ikona zakładki – stan aktywny Biały Biały @ 88%
Ikona karty - stan nieaktywny Biały @ 56% Biały @ 50%

Rozmiarowanie

Element Rozmiar (dp)
Ikona główna 44
Ikona drugorzędna 36
Ikona celu dotykowego 76

Przykłady

Karty zostały zwinięte.


Karty zagnieżdżone na pasku aplikacji.

Osobny pasek kart.