Rozwijane elementy

Rozwijany element to element niestandardowy, który wyświetla dodatkową treść w tekście.

Element rozwijanego elementu

Rozwijane elementy pozwalają aplikacjom umieszczać treści w dużej gęstości na mniejszej powierzchni ekranu. Użyj tego komponentu, jeśli aplikacja ma być zwięzła, a jednocześnie umożliwiać użytkownikom szybki dostęp do dodatkowych treści. Za pomocą tego komponentu możesz umożliwić użytkownikom wykonywanie tych czynności:

  • Pokaż więcej elementów listy (elementy, karty)
  • Pokaż więcej tekstu

Anatomia

Rozwijana lista
Element musi być wyrównany do środka.

A. Etykieta
Tekst etykiety można dostosować. Domyślna wartość to „Pokaż więcej”.

B. Kontener
Przycisk musi zawierać obramowanie kontenera.

C. Ikona rozwinięcia
Domyślną ikoną jest szewron skierowany w dół, który można zmienić lub usunąć. Ikona jest wyrównana do prawej strony w przypadku języka LTR i do lewej w przypadku języków z zapisem od prawej do lewej.

Rozwijany tekst
Element musi być wyrównany do środka.

A. Etykieta
Tekst etykiety można dostosować. Domyślna wartość to „Więcej”.

B. Kontener
Przycisk ma 2 wersje: z obrysem i bez konturu.

C. Ikona rozwinięcia
Domyślną ikoną jest szewron skierowany w dół, który można zmienić lub usunąć. Ikona jest wyrównana do prawej strony w przypadku języka LTR i do lewej w przypadku języków z zapisem od prawej do lewej.

Działanie

Rozwijana lista

Kliknij element, aby go rozwinąć i wyświetlić więcej elementów na liście. Rozwijanie jest animowane, ukrywa tekst Pokaż więcej i płynnie odsłania pozostałe elementy. Możesz dostosować liczbę elementów wyświetlanych w stanie zwiniętym. Zalecana liczba elementów to 3.

Rozwijanie tekstu

Kliknij element, aby go rozwinąć i wyświetlić więcej tekstu. Rozwijanie jest animowane, ukrywa tekst Więcej i płynnie odsłania pozostałe elementy. Możesz dostosować liczbę wierszy tekstu wyświetlanych w stanie zwiniętym. Zalecana liczba wierszy to osiem.

Element dotykowy obejmuje cały obszar tekstowy, a nie tylko przycisk.

Style elementów

Rozwijana lista

Rozmiar ikony: 20 dp x 20 dp
Kolor ikony: na powierzchni
Wysokość: 32 dp
Szerokość: różni się w zależności od tekstu i języka
Kreska: 1 dp
Styl etykiety: podpis 1
Kolor etykiety: na powierzchni

Rozwijanie tekstu

Rozmiar ikony: 20 dp x 20 dp
Kolor ikony: na powierzchni
Wysokość: 32 dp
Szerokość: różni się w zależności od tekstu i języka
Kreska: 0 lub 1 dp
Wypełnienie: brak
Styl etykiety: podpis 1
Kolor etykiety: na powierzchni

Dopełnienie

Zarówno w przypadku wariantu listy, jak i wersji tekstowej komponentu rozwijanego element powinien mieć te wartości dopełnienia:

  • Dopełnienie u góry: 8 dp
  • Dopełnienie u dołu: 16 dp

Wykorzystanie

Przykłady zastosowania elementów rozwijanych: