Skip to main content

Container

Base​

Anatomia​

Cada elemento que compõe a anatomia do Container está associado a um subcomponente. Estes subcomponentes devem ser inseridos no código de modo que, após a avaliação final, sejam renderizados como filhos imediatos do Container.

  1. Barra lateral: Subcomponente Container.Sidebar
  2. Cabeçalho: Subcomponente Container.Header
  3. Conteúdo: Subcomponente Container.Content
  4. Rodapé: Subcomponente Container.Footer
  5. Painel: Subcomponente Container.Panel
Informação

O Container preenche automaticamente toda a largura e altura disponíveis, e também faz com que seus elementos ascendentes expandam para ocupar todo o espaço.

Caso você queira que este comportamento NÃO se propague para os elementos pais do Container, adicione o atributo data-tg-container-no-stretch-chain a qualquer um desses elementos ascendentes.

Caso você queira que apenas um elemento específico NÃO se estique para ocupar todo o espaço, adicione o atributo data-tg-container-no-stretch neste elemento.

Utilize o subcomponente Container.Header para definir o cabeçalho do Container.

Anatomia​

Cada elemento que compõe a anatomia do Container.Header está associado a um subcomponente. Estes subcomponentes devem ser inseridos no código de modo que, após a avaliação final, sejam renderizados como filhos imediatos do Container.Header.

  1. Prefixo: Subcomponente Container.Header.Prefix
  2. Título: Subcomponente Container.Header.Title
  3. Conteúdo auxiliar: Subcomponente Container.Header.Auxiliary
  4. Sufixo: Subcomponente Container.Header.Suffix
  5. Conteúdo customizado: Subcomponente Container.Header.Custom

Filhos de Container.Header que não sejam uma dessas sub-regiões são colocados automaticamente em Container.Header.Custom. Quando não existem Container.Header.Prefix, Container.Header.Title, Container.Header.Auxiliary ou Container.Header.Suffix, o conteúdo customizado ocupa todo o cabeçalho.

Variações​

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 Container.Sidebar, Container.Panel ou está fixo, se apresenta como um cabeçalho de seção

Como cabeçalho de página​

Como cabeçalho de seção​

Título com badge​

Combine o título com um Badge para destacar algum elemento de contagem ou status.

Título e texto auxiliar truncados​

Use Link ou Text com a propriedade truncate dentro do título e do conteúdo auxiliar quando não quiser quebras de linha.

Com avatar​

Coloque o Avatar no Container.Header.Prefix para identificar um usuário associado ao recurso descrito pelo cabeçalho.

Ações​

Agrupe ações no Container.Header.Suffix.

Botão fechar​

Inclua o subcomponente Container.Header.Close como filho do subcomponente Container.Header.Suffix para adicionar o botão fechar.

Container.Header.Close só fica visível dentro de um contexto fechável, como um Container.Panel ou uma Drawer. Ele pode permanecer declarado sem condicionais, seu próprio estilo controla sua visibilidade.

Ao ser acionado, o botão:

  1. Chama seu onClick, quando fornecido
  2. Solicita o fechamento do Container fechável mais externo
  3. Faz o onToggle desse contexto receber false e { reason: 'closeButton' } (veja a documentação da API)
Dica

O conteúdo textual de Container.Header.Close define o nome acessível do ícone. Valores pré-definidos estão disponíveis no atributo Container.Header.Close.translations para português, espanhol e inglês.

<Container.Header.Close>Fechar</Container.Header.Close>

Use a propriedade fixed no Container.Header e Container.Footer para fixar essas regiões nas estremidades enquanto o conteúdo rola.

Use a propriedade bordered no Container.Header e Container.Footer para adicionar bordas nas estremidades e separá-las do conteúdo.

Layout interno​

Use a propriedade layout para controlar o espaçamento horizontal interno. Os valores disponíveis são:

  • 'full': Ocupa toda a largura, sem espaçamento
  • 'padded': Ocupa toda a largura, com espaçamento horizonal interno
  • 'contained': Largura limitada até 1280px, com espaçamento horizontal interno

Sem um valor, a região herda o layout do Container pai. É possível sobrescrever o layout em regiões específicas, como Container.Header ou Container.Content.

Use o Container.Sidebar para estruturar recursos de navegação relacionados a Coluna principal.

Painel​

Use o Container.Panel para conteúdos de apoio ligados à área principal (detalhe, filtros ou histórico) sem sair do contexto da página.

Visibilidade​

Controle a visibilidade com as propriedades show e onToggle ou inicie com ele visível com a propriedade defaultShow no modo não controlado. Quando o Container está em sm, o Painel deve ser exibido com a propriedade activeSection="panel".

Tamanhos​

Utilize a propriedade size para definir a largura do Painel. Os valores disponíveis são 'sm' (pequeno, padrão), 'md' (médio) e 'lg' (grande).

Essa escala não representa os breakpoints. Quando o Container não está em 'sm', o Painel sempre ocupa toda a largura, independentemente do valor de size.

Responsividade​

O Container mede sua própria largura e a classifica em três breakpoints:

  • 'sm': para largunras pequenas.
  • 'md': para larguras médias.
  • 'lg': para larguras grandes.

O comportamento das regiões muda conforme a faixa:

  • Em 'lg', Barra lateral, Coluna principal e Painel visível permanecem lado a lado
  • Em 'md', Barra lateral e Coluna principal permanecem lado a lado, o Painel é apresentado como uma Drawer
  • Em 'sm', somente a região selecionada pela propriedade activeSection fica visível e ocupa toda a largura

Use useContainerBreakpoint para adaptar também o conteúdo ao espaço disponível:

function SomeContent() {
  const { isSm } = useContainerBreakpoint();

  return isSm ? <ResumoCompacto /> : <ResumoDetalhado />;
}

Sem um argumento, o hook usa o breakpoint do Container ancestral mais próximo. Também é possível observar explicitamente um elemento, um id ou uma referência React:

function AreaObservada() {
  const { breakpoint } = useContainerBreakpoint('container');

  return <Container id="container">Breakpoint atual: {breakpoint}</Container>;
}

Antes da primeira medição, ou fora de um Container sem alvo explícito, o hook retorna 'lg'.

Breakpoint fixado​

Use a propriedade breakpoint para fixar uma faixa quando o layout não deve depender da medição automática, por exemplo em demonstrações e ambientes de teste:

<Container breakpoint="sm" activeSection="main">
  <SomeContent />
</Container>

Container.Sidebar e Container.Panel também aceitam um breakpoint próprio. Quando não recebem essa propriedade, usam a classificação do Container pai ou a própria medição.

Navegação entre regiões​

Utilize a propriedade activeSection com os valores 'sidebar', 'main' (padrão) ou 'panel' para controlar qual região está visível em Containers pequenos ('sm').

Quando o Container não está em 'sm', a propriedade não tem efeito. A navegação entre regiões é responsabilidade de quem está consumindo o componente.

Aninhamento​

Container.Sidebar, Container.Panel e a Drawer next são containers completos. Eles podem ter cabeçalho, conteúdo e rodapé próprios e manter sua estrutura independente do Container externo.

Por serem um Container, esses componentes podem receber internamente outros Containers preservando seus estilos e comportamentos, mesmo com a presença de elementos intermediários. Esta estrutra é útil para embedar elementos de interface via micro-frontends (MFEs).

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.