Uma pilha é uma lista recolhida que mostra apenas um conteúdo por vez em um visual empilhado, como uma notificação ou um card.
Princípios
As pilhas são um componente de contêiner, então compartilham princípios de design com cards e listas:
Contenção: as pilhas agrupam informações e ações relacionadas em uma única unidade fácil de entender.
Foco e clareza: eles apresentam o conteúdo de maneira clara e focada.
Versatilidade: as pilhas podem mostrar cards e notificações.
Apresentação consistente: as pilhas seguem uma estrutura visual consistente.
Uso e posicionamento
As pilhas são uma maneira de mostrar aos usuários que há vários elementos recolhidos em uma lista, minimizando os elementos visuais na visualização. Há duas variantes diferentes de pilhas:
Pilhas de cards
Pilha de notificações
As pilhas são um componente de contêiner, e as duas versões não agem nem parecem diferentes.
Ambos devem ter aparência e comportamento quase idênticos. A pilha é um contêiner para esses controles com lógica integrada para paginação.
Os usuários navegam deslizando ou arrastando para frente e para trás no touchpad. Ao rolar a pilha, você vai passar por apenas um item por vez.
Use a profundidade para indicar o foco
Os itens da parte de baixo da pilha usam uma profundidade de 0, enquanto o item mais alto usa uma profundidade de +2.
As pilhas podem ser percorridas um item por vez
Ao tocar na tela, as pilhas podem apresentar um item por vez movendo-se verticalmente.
Com a entrada por toque, as pilhas podem se tornar listas para mostrar mais de um elemento por vez. A lista precisa usar contêineres padrão e estados de foco.
Anatomia
Uma pilha é sempre recolhida como um componente de paginação. O item de cima é sempre o foco principal, mostrando a profundidade de borda mais forte, a menos que haja um botão aninhado ativado.
Os bumpers ajudam a reforçar o início e o fim de uma pilha. Uma animação de mola que encaixa a lista de volta no lugar ao ser solta.
Personalização
As pilhas têm scrim, paginação e animações integradas que não podem ser personalizadas. Em vez disso, o conteúdo nas pilhas é personalizado.