Bottom Sheet
Surge de forma contextual para oferecer opções e informações relevantes exatamente quando o usuário precisa, sem interromper seu fluxo de trabalho e mantendo visível a tela de fundo.
Uso
Adicione o componente de “Bottom Sheet” em um auto layout com a largura da tela e altura definida de acordo com o contexto (Expandable, Fit-content, Full-screen)
Ative a opção "Ignore auto layout"
Altere o Resize Mode do componente "Bottom Sheet" para “Scale” e altere manualmente seu tamanho para o desejado
Adicione o conteúdo normalmente e o componente se adaptará automaticamente
OBS: Sempre aplique o componente de "Top Bar" no topo do auto layout que contem a Bottom Sheet
✅ Do
Bottom Sheets podem ser apenas utilizadas juntamente com as variantes "Drag Handle" ou "Empty" da Top Bar
❌ Don't
Bottom Sheets não podem ser utilizadas com a barra verde
Use Cases
Os use cases podem ser divididos em três categorias: Fit-content, Full-screen e Expandable
Expandable sheet
Abre em 50% da tela como preview
Em caso de arrasto, expande até 100% da tela com animação “expansão da sheet”
Ao arrastar para baixo, com intenção de fechar, a sheet scrolla até o topo e é fechada sem voltar ao estágio inicial em que ocupa metade da tela
Fit-Content Sheet
Não é expansível e se adapta de acordo com a quantidade de conteúdo
Altura máxima de 75% do tamanho da tela
Full-Screen Sheet
Ocupa todo espaço disponível da tela
Utilizada em casos que existe scroll de tamanho máximo indefinido na sheet
Animação
Animação de entrada
cubic-bezier (0.16, 1, 0.3, 1);
duração: 0.3s
Animação de expansão
cubic-bezier (0.87, 0, 0.13, 1);
duração: 0.3s
Animação de saída
cubic-bezier (0.16, 1, 0.3, 1);
duração: 0.2s
Histórico de Atualizações
Atualizado