Un elemento expandible es un chip personalizado que muestra contenido adicional intercalado.
Chip de elemento expandible
Los elementos expandibles permiten que las apps incluyan contenido de alta densidad en menos espacio en la pantalla. Usa este componente cuando quieras mantener un formato compacto de la app y, al mismo tiempo, permitir que los usuarios accedan rápidamente a contenido adicional.
Utiliza este componente para permitir que los usuarios realicen las siguientes tareas:
- Mostrar más elementos de lista (chips, tarjetas)
- Mostrar más texto
Anatomía
Lista desplegable
El chip debe estar alineado al centro.
A. Etiqueta
El texto de la etiqueta se puede personalizar. La opción predeterminada es "Mostrar más".
B. Contenedor
El botón debe incluir un borde de contenedor.
C. Ícono de expandir
El ícono predeterminado es el corchete angular que aparece hacia abajo, que se puede personalizar o
quitar. El ícono está alineado a la derecha para una configuración regional de idioma de izquierda a derecha y viceversa.
Texto desplegable
El chip debe estar alineado al centro.
A. Etiqueta
El texto de la etiqueta se puede personalizar. La opción predeterminada es "Más".
B. Contenedor
El botón tiene dos variantes: con contorno y sin contorno.
C. Ícono de expandir
El ícono predeterminado es el corchete angular que aparece hacia abajo, que se puede personalizar o
quitar. El ícono está alineado a la derecha para una configuración regional de idioma de izquierda a derecha y viceversa.
Comportamiento
Lista desplegable
Presiona el chip para expandir y mostrar más elementos en una lista. Se anima la acción de expansión, lo que oculta el texto Mostrar más y muestra los demás elementos con un solo movimiento fluido. Puedes personalizar la cantidad de elementos que se muestran en el estado contraído. La cantidad recomendada de elementos es tres.
Texto desplegable
Presiona el chip para expandir y mostrar más texto. Se anima la acción de expansión, lo que oculta el texto Más y muestra los demás elementos con un solo movimiento fluido. Puedes personalizar la cantidad de líneas de texto que se muestran en el estado contraído. La cantidad recomendada de líneas es ocho.
El objetivo de presión contiene toda el área de texto, no solo el botón.
Estilos de chip
Lista desplegable
Tamaño del ícono: 20 dp x 20 dp
Color del ícono: En la superficie
Altura: 32 dp
Ancho: Varía según el texto y el idioma
Trazo: 1 dp
Estilo de la etiqueta: Leyenda 1
Color de la etiqueta: En la superficie
Texto desplegable
Tamaño del ícono: 20 dp x 20 dp
Color del ícono: En la superficie
Altura: 32 dp
Ancho: Varía según el texto y el idioma
Trazo: 0 o 1 dp
Relleno: Ninguno
Estilo de la etiqueta: Título 1
Color de la etiqueta: En la superficie
Padding
Tanto para la variante de lista como para la de texto del componente del elemento expandible, el chip debe tener los siguientes valores de relleno:
- Relleno superior: 8 dp
- Relleno inferior: 16 dp
Uso
Ejemplos de uso de elementos expandibles:
