Container
O Container é o componente de layout que estrutura interfaces em regiões semânticas e responsivas. Ele pode reunir uma barra lateral, cabeçalho, conteúdo, rodapé e painel sem exigir que o produto recrie a distribuição, a rolagem e a adaptação dessas áreas.
A responsividade do componente considera a largura do próprio Container, e não a largura da janela. Assim, a mesma interface pode ocupar uma página inteira, um painel, uma Drawer ou uma região qualquer, pois se adapta ao espaço efetivamente disponível.
Anatomia
Um Container pode combinar até cinco regiões. Nenhuma delas é obrigatória.
- Barra lateral: Coluna lateral esquerda, geralmente destinada para navegação
- Cabeçalho: Topo da Coluna principal
- Conteúdo: Área principal da Coluna principal
- Rodapé: Base da Coluna principal
- Painel: Coluna lateral direita de apoio
A Barra lateral e o Painel ocupam as laterais. O Cabeçalho, o Conteúdo e o Rodapé se empilham na Coluna principal, que absorve o espaço restante.
A Barra lateral e o Painel também são containers, criando assim uma estrutura recursiva.
Cabeçalho
O Cabeçalho muda de aparência conforme o contexto em que está presente:
- Quando ele está presente dentro da Coluna principal e não está fixo, se apresenta como um cabeçalho de página
- Quando está dentro da Barra lateral, Painel ou está fixo, se apresenta como um cabeçalho de seção
Anatomia
O cabeçalho também se organiza em sub-regiões.
- Prefixo: Extremo esquerdo, botão de voltar, ícone ou avatar
- Título: Título do cabeçalho
- Conteúdo auxiliar: Conteúdo auxiliar do cabeçalho, como tags ou texto auxiliar, exibido abaixo do título
- Sufixo: Extremo direito, ações e botão fechar
- Conteúdo customizado: Segunda linha inteira, filtros, abas ou busca
Painel
Use como região de apoio: Detalhe do item selecionado, filtros avançados, histórico ou conteúdos complementares à área principal.
A altura do Painel é fixa, respeitando a altura total disponível para o Container. Já a largura tem 3 tamanhos definidos, que podem ser usados de acordo com a necessidade:
- Pequeno: Largura máxima de 300px
- Médio (padrão): Largura máxima de 400px
- Grande: Largura máxima de 600px
Responsividade
A responsividade do Container observa a largura do próprio componente, não a da janela.
As faixas usam os mesmos limites dos design tokens de tela:
| Breakpoint | Largura do Container | Comportamento |
|---|---|---|
Pequenos (sm) | Menor ou igual a 480px | Somente uma das colunas fica visível e ocupa toda a largura. |
Médios (md) | 481px - 1024px | A Barra lateral e a Coluna principal permanecem visíveis lado a lado, o Painel é apresentado como uma Drawer. |
Grandes (lg) | Acima de 1025px | Barra lateral, Coluna principal e Painel visível permanecem lado a lado. |
Feedback
To report a problem, request new icons, request new component use cases, ask questions, share suggestions, or report bugs, get in touch through our Slack channel #tangram-design-system.