Elementi espandibili

Un elemento espandibile è un chip personalizzato che visualizza contenuti aggiuntivi in linea.

Chip di elemento espandibile

Gli elementi espandibili consentono alle app di includere contenuti ad alta densità in meno spazio sullo schermo. Utilizza questo componente se vuoi mantenere un'app compatta e consentire agli utenti di accedere rapidamente a contenuti aggiuntivi. Utilizza questo componente per consentire agli utenti di eseguire le seguenti attività:

  • Mostra più elementi dell'elenco (chip, carte)
  • Mostra altro testo

Anatomia

Elenco espandibile
Il chip deve essere allineato al centro.

A. Etichetta
Il testo dell'etichetta può essere personalizzato. L'impostazione predefinita è "Mostra altro".

B. Contenitore
Il pulsante deve includere un bordo del contenitore.

C. Icona Espandi
L'icona predefinita è il gallone rivolto verso il basso, che può essere personalizzata o rimossa. L'icona è allineata a destra per le impostazioni internazionali in lingua LTR e a sinistra per le impostazioni di lingua RTL.

Testo espandibile
Il chip deve essere allineato al centro.

A. Etichetta
Il testo dell'etichetta può essere personalizzato. Il valore predefinito è "More".

B. Contenitore
Il pulsante ha due varianti: con contorno e non con contorno.

C. Icona Espandi
L'icona predefinita è il gallone rivolto verso il basso, che può essere personalizzata o rimossa. L'icona è allineata a destra per le impostazioni internazionali in lingua LTR e a sinistra per le impostazioni di lingua RTL.

Comportamento

Elenco espandibile

Tocca il chip per espandere e visualizzare più elementi in un elenco. L'azione di espansione si anima, nascondendo il testo Mostra altro e rivelando gli altri elementi con un unico movimento fluido. Puoi personalizzare il numero di elementi visualizzati nello stato compresso. Il numero consigliato di elementi è tre.

Testo espandibile

Tocca il chip per espandere e visualizzare altro testo. L'azione di espansione si anima, nascondendo il testo Altro e rivelando gli altri elementi con un unico movimento fluido. Puoi personalizzare il numero di righe di testo visualizzate nello stato compresso. Il numero consigliato di righe è otto.

Il target dei tocchi è costituito dall'intera area di testo, non solo dal pulsante.

Stili chip

Elenco espandibile

Dimensioni icona: 20 dp x 20 dp
Colore icona: sulla superficie
Altezza: 32 dp
Larghezza: varia in base al testo e alla lingua
Tratto: 1 dp
Stile etichetta: Didascalia 1
Colore etichetta: sulla superficie

Testo espandibile

Dimensioni icona: 20 dp x 20 dp
Colore icona: sulla superficie
Altezza: 32 dp
Larghezza: varia in base al testo e alla lingua
Tratto: 0 o 1 dp
Riempimento: Nessuno
Stile etichetta: Didascalia 1
Colore etichetta: Sulla superficie

Spaziatura interna

Sia per la variante elenco che per la variante di testo del componente elemento espandibile, il chip deve avere i seguenti valori di spaziatura interna:

  • Spaziatura interna superiore: 8 dp
  • Spaziatura interna inferiore: 16 dp

Utilizzo

Esempi di utilizzo di elementi espandibili: