Una pila es una lista contraída que solo muestra un elemento de contenido a la vez, en una visualización apilada, como una notificación o una tarjeta.
Principios
Stack es un componente de contenedor, por lo que comparte principios de diseño con las tarjetas y las listas:
Contención: Las pilas agrupan información y acciones relacionadas en una sola unidad fácil de comprender.
Enfoque y claridad: Presentan el contenido de forma clara y enfocada.
Versatilidad: Las pilas pueden mostrar tarjetas y notificaciones.
Presentación coherente: Las pilas siguen una estructura visual coherente.
Uso y posición
Las pilas son una forma de mostrar a los usuarios que hay varios elementos contraídos en una lista y, al mismo tiempo, minimizar los elementos visuales que se muestran. Existen dos variantes diferentes de pilas:
Pilas de tarjetas
Pilas de notificaciones
Las pilas son un componente de contenedor, y ambas versiones no actúan ni se ven de manera diferente.
Ambos deben verse y actuar de forma casi idéntica. La pila es simplemente un contenedor para estos controles con lógica integrada para la paginación.
Los usuarios navegan deslizando o arrastrando el dedo por el panel táctil hacia adelante y hacia atrás. Desplazarse por la pila solo se moverá por un elemento a la vez.
Usa la profundidad para indicar el enfoque
Los elementos de la pila inferior usan una profundidad de 0, mientras que el elemento superior usa una profundidad de +2.
Las pilas se pueden recorrer de un elemento a la vez
Cuando se ingresa un toque, las pilas pueden presentar un elemento a la vez moviéndose verticalmente.
Cuando se ingresa un toque, las pilas pueden convertirse en listas para mostrar más de un elemento a la vez. La lista debe usar contenedores y estados de enfoque predeterminados.
Anatomía
Una pila siempre se contrae como un componente de paginación. El elemento superior siempre es el foco principal y muestra la profundidad de borde más fuerte, a menos que haya un botón habilitado anidado.
Los bumpers ayudan a reforzar el final o el comienzo de una pila. Una animación de resorte que vuelve a colocar la lista en su lugar cuando se suelta.
Personalización
Las pilas tienen una pantalla de atenuación, paginación y animaciones integradas que no se pueden personalizar. En cambio, se personaliza el contenido dentro de las pilas.