Elemento espandibile

Un elemento espandibile è un chip personalizzato che mostra 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à:

  1. Mostra più elementi dell'elenco (chip, schede)
  2. 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 è la freccia di espansione rivolta verso il basso, che può essere personalizzata o rimossa. L'icona è allineata a destra per le impostazioni internazionali di una lingua LTR e a sinistra per le impostazioni internazionali di una lingua RTL.

Testo espandibile
Il chip deve essere allineato al centro.

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

B. Contenitore
Il pulsante ha due varianti: con contorni e senza contorni.

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

Comportamento

Elenco espandibile

Tocca il chip per espanderlo e visualizzare più articoli in un elenco. L'azione di espansione si anima, nascondendo il testo Mostra altro e mostrando 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 espanderlo e visualizzare più testo. L'azione di espansione si anima, nascondendo il testo Altro e mostrando 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 a testo e lingua
Tratto: 1 dp
Stile etichetta: Didascalia 1
Colore etichetta: On Surface

Testo espandibile

Dimensioni icona: 20 dp x 20 dp
Colore icona: sulla superficie
Altezza: 32 dp
Larghezza: varia in base a testo e lingua
Tratto: 0 o 1 dp
Riempimento: nessuno
Stile etichetta: didascalia 1
Colore etichetta: sulla superficie

Spaziatura interna

Per la variante dell'elenco e della variante di testo del componente dell'articolo 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 degli elementi espandibili:

Tre esempi del componente