Container
Containers definem largura, centralizam conteúdo e oferecem padding seguro para estruturar as telas do Proto-Typed.
Quando usar
- Definir a coluna principal de uma tela antes de adicionar componentes.
- Alternar entre leitura focada (
container-narrow) e dashboards amplos (container-wide). - Garantir espaçamento horizontal consistente em páginas responsivas.
- Combinar múltiplos layouts (grid, stack, cards) mantendo alinhamento previsível.
Exemplo básico
Container padrão em tela informativa
Por quê: estabelece a coluna central e prepara o espaço para conteúdo complementar.
Variantes
Container estreito para foco
Quando usar: concentrar atenção em formulários ou leitura longa. Por quê: a largura reduzida guia o olhar para campos e instruções.
Container amplo para dashboards
Quando usar: disponibilizar múltiplas colunas de conteúdo de forma equilibrada. Por quê: evita compressão de cards ao distribuir métricas em colunas amplas.
Largura total com layout controlado
Quando usar: ocupar toda a largura, delegando o espaçamento ao layout interno. Por quê: permite heróis e painéis que controlam padding dentro do próprio layout.
Composição (usando com outros)
- Container + Stack — estrutura seções verticais com espaçamento previsível.
- Container + Grid — alinha dashboards e coleções de cards.
- Container + Navigator — agrupa header, abas e conteúdo principal na mesma tela.
Container com header e conteúdo
Por quê: separa navegação e conteúdo mantendo alinhamento central.
Slots & Props
| Nome | Tipo | Padrão | Descrição | Obrigatório |
|---|---|---|---|---|
variante | enum (container, container-narrow, container-wide, container-full) | container | Define largura máxima e gutters laterais. | Não |
conteúdo interno | blocos DSL | — | Elementos, componentes, stacks e grids renderizados dentro do container. | Sim |
multiplos containers | sequência | — | Permite combinar larguras diferentes na mesma tela. | Não |
Erros comuns (Do/Don’t)
❌ Errado — Container duplicado
✅ Correto — Stack dentro do container
Por quê: stacks organizam seções internas sem duplicar controles de largura.
❌ Errado — Conteúdo alinhado à borda
✅ Correto — Stack controla o espaçamento
Por quê: container-full ocupa toda a largura e depende do layout interno para aplicar padding.
Referências cruzadas
Relacionados
Screen: define a estrutura principal antes dos containers.Stack: organiza conteúdo vertical dentro do container.Grid: distribui cards e métricas em múltiplas colunas.Dashboard: guia completo sobre montagem de telas analíticas.
Composições recomendadas
- Container + Stack → sequência de seções com leitura fluida.
- Container + Grid → dashboards responsivos com cards alinhados.
- Container + Drawer → mantém conteúdo principal visível quando há painéis laterais.
Container com painel lateral
Por quê: combina largura maior com drawer para contexto secundário.