Top Bar
Exibem navegação, ações e texto na parte superior de Modais e Sheets
Uso
Top bars disponibilizam ações e navegação em Modais e Sheets.
Variantes - Type
Tipo de conteúdo a ser exibido dentro da Top Bar
Title
A variante "Title" é utilizada principalmente para uma navegação primária dentro de Modais e Sheets.
❖. Container
No container é ativado uma layer, com shadow, ao realizar scroll.
1. Voltar (Contextual)
O voltar deve ser aplicado em contextos de fluxos internos dentro de modais e sheets.
2. Title
Recebe como conteúdo o título do contexto, do modal e sheets.
3. Description (Opcional)
Recebe como conteúdo textos complementares ao título e/ou contexto.
4. Fechar
Obrigatório em todo contexto pois é a indicação necessária para fechar os modais/sheets.
Full
A variante "Full" é mais versátil, podendo ser aplicada em diversos contextos.
❖. Container
O container recebe shadow em elevação ao realizar scroll.
1. Thumbnail (Opcional)
Aplicado pelo contexto, principalmente quando a Top bar é utilizada como topo para modais/sheets de overflow de conteúdos como Álbuns e Artistas.
2. Title
Recebe como conteúdo o título do contexto, do modal e sheets.
3. Description (Opcional)
Recebe como conteúdo textos complementares ao título e/ou contexto.
4. Fechar
Obrigatório em todo contexto pois é a indicação necessária para fechar os modais/sheets.
5. Progress bar (Opcional)
Aplicado em contextos de step-by-step como o onboarding e exercicios de curso.
Compact
A variante "Compact" não exibe títulos ou textos.
❖. Container
O container recebe shadow em elevação ao realizar scroll.
1. Progress bar (Opcional)
Aplicado em contextos de step-by-step como o onboarding e exercicios de curso.
2. Fechar
Obrigatório em todo contexto pois é a indicação necessária para fechar os modais/sheets.
Clean
A variante "Clean" é utilizada em momentos em que o título da sheet está fora do topo. Acontece mais em casos em que há uma imagem acima, então a Top bar fica em cima da imagem.
❖. Container
O container recebe shadow em elevação ao realizar scroll.
2. Fechar
Obrigatório em todo contexto pois é a indicação necessária para fechar os modais/sheets.
Variantes - Top
Tipo de layout do topo da Top Bar
Brand Bar
Exibe a barra verde. Seu uso é apenas recomendado em side sheets, telas de onboarding e outros contextos que em que é importante reforçar a presença da marca
Drag Handle
Usado em mobile/app em bottom sheets e contextos que, na web, seriam utilizados menus flutuantes. Essa variante não suporta o botão de fechar.
Empty
Usada em bottom sheets que não tem o comportamento draggable, não possuem scroll e são fechadas com o botão de fechar.
Use Cases
Histórico de Atualizações
Atualizado