Skip to main content

Container

Import​

import { Container } from '@resultadosdigitais/tangram-components'

Properties​

layout​

Type
Enum of:
  • 'full'
  • 'padded'
  • 'contained'

Description​

Define o layout do Container, podendo ser 'full' (ocupa toda largura, sem espaçamento), 'padded' (ocupa toda largura, com espaçamento) ou 'contained' (com largura limitada e com espaçamento).

Sem valor, herda o layout do Container pai.

activeSection​

Type
Enum of:
  • 'sidebar'
  • 'main'
  • 'panel'

Description​

Define a seção ativa para largura pequena (sm), podendo ser 'sidebar' para a barra lateral, 'main' para conteúdo principal ou 'panel' para o painel.

Nas demais larguras, todas as seções permanecem visíveis.

breakpoint​

Type
Enum of:
  • 'sm'
  • 'md'
  • 'lg'

Description​

Fixa o breakpoint do Container em 'sm' (largura pequena), 'md' (largura média) ou 'lg' (largura grande). Sem valor, o breakpoint é medido pela largura do próprio Container.

Use 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

children​

Typenode

Description​

Filhos do Container, tipicamente subcomponentes como ContainerSidebar, ContainerHeader, ContainerContent, ContainerFooter e ContainerPanel.

Filhos que não sejam uma desses subcomponentes são colocados automaticamente em um ContainerContent.

<ContainerContent />​

Import​

import { ContainerContent } from '@resultadosdigitais/tangram-components'

Properties​

layout​

Type
Enum of:
  • 'full'
  • 'padded'
  • 'contained'
Description​

Define o layout do conteúdo, podendo ser 'full' (ocupa toda largura, sem espaçamento), 'padded' (ocupa toda largura, com espaçamento) ou 'contained' (com largura limitada e com espaçamento).

Sem valor, herda o layout do Container pai.

children​

Typenode
Description​

Conteúdo da região principal.

<ContainerFooter />​

Import​

import { ContainerFooter } from '@resultadosdigitais/tangram-components'

Properties​

layout​

Type
Enum of:
  • 'full'
  • 'padded'
  • 'contained'
Description​

Define o layout do rodapé, podendo ser 'full' (ocupa toda largura, sem espaçamento), 'padded' (ocupa toda largura, com espaçamento) ou 'contained' (com largura limitada e com espaçamento).

Sem valor, herda o layout do Container pai.

fixed​

Typebool
Description​

Mantém o rodapé fixo na parte inferior. O rodapé sempre ficará fixo se estiver dentro de componente flutuante (Overlay).

bordered​

Typebool
Defaultfalse
Description​

Adiciona uma borda ao rodapé, separando-o do conteúdo. Esta borda sempre é incluída quando o rodapé está dentro de componente flutuante (Overlay).

children​

Typenode
Description​

Conteúdo do rodapé.

<ContainerHeader />​

Import​

import { ContainerHeader } from '@resultadosdigitais/tangram-components'

Properties​

layout​

Type
Enum of:
  • 'full'
  • 'padded'
  • 'contained'
Description​

Define o layout do cabeçalho, podendo ser 'full' (ocupa toda largura, sem espaçamento), 'padded' (ocupa toda largura, com espaçamento) ou 'contained' (com largura limitada e com espaçamento).

Sem valor, herda o layout do Container pai.

fixed​

Typebool
Description​

Mantém o cabeçalho fixo na parte superior. O cabeçalho sempre ficará fixo se estiver dentro de componente flutuante (Overlay).

bordered​

Typebool
Defaultfalse
Description​

Adiciona uma borda ao cabeçalho, separando-o do conteúdo. Esta borda sempre é incluída quando o cabeçalho está dentro de componente flutuante (Overlay).

children​

Typenode
Description​

Conteúdo do cabeçalho, tipicamente subcomponentes como ContainerHeaderPrefix, ContainerHeaderTitle, ContainerHeaderAuxiliary, ContainerHeaderSuffix e ContainerHeaderCustom.

Filhos que não sejam uma desses subcomponentes são colocados automaticamente em um ContainerHeaderCustom.

<ContainerHeaderAuxiliary />​

Import​

import { ContainerHeaderAuxiliary } from '@resultadosdigitais/tangram-components'

Properties​

children​

Typenode
Description​

Conteúdo auxiliar do cabeçalho, tipicamente descrições ou informações adicionais.

<ContainerHeaderClose />​

Import​

import { ContainerHeaderClose } from '@resultadosdigitais/tangram-components'

Properties​

children​

Typestring
DefaultContainerHeaderClose.translations.en.close
Description​

Texto acessível do botão. Valores pré-definidos estão disponíveis no atributo ContainerHeaderClose.translations para português (ContainerHeaderClose.translations.ptBR.close), espanhol (ContainerHeaderClose.translations.es.close) e inglês (ContainerHeaderClose.translations.en.close).

<ContainerHeaderCustom />​

Import​

import { ContainerHeaderCustom } from '@resultadosdigitais/tangram-components'

Properties​

children​

Typenode
Description​

Conteúdo customizado do cabeçalho.

<ContainerHeaderPrefix />​

Import​

import { ContainerHeaderPrefix } from '@resultadosdigitais/tangram-components'

Properties​

children​

Typenode
Description​

Conteúdo do cabeçalho exibido no início (à esquerda).

<ContainerHeaderSuffix />​

Import​

import { ContainerHeaderSuffix } from '@resultadosdigitais/tangram-components'

Properties​

children​

Typenode
Description​

Conteúdo do cabeçalho exibido no final (à direita).

<ContainerHeaderTitle />​

Import​

import { ContainerHeaderTitle } from '@resultadosdigitais/tangram-components'

Properties​

children​

Typenode
Description​

Título do cabeçalho.

<ContainerPanel />​

Import​

import { ContainerPanel } from '@resultadosdigitais/tangram-components'

Properties​

size​

Type
Enum of:
  • 'sm'
  • 'md'
  • 'lg'
Default'sm'
Description​

Define a largura do painel, podendo ser 'sm' (largura pequena), 'md' (largura média) ou 'lg' (largura grande).

layout​

Type
Enum of:
  • 'full'
  • 'padded'
  • 'contained'
Default'padded'
Description​

Define o layout do painel, podendo ser 'full' (ocupa toda largura, sem espaçamento), 'padded' (ocupa toda largura, com espaçamento) ou 'contained' (com largura limitada e com espaçamento).

Sem valor, herda o layout do Container pai.

show​

Typebool
Description​

Controla a visibilidade do painel.

defaultShow​

Typebool
Description​

Define a visibilidade inicial no modo não controlado.

breakpoint​

Type
Enum of:
  • 'sm'
  • 'md'
  • 'lg'
Description​

Fixa o breakpoint do painel em 'sm' (largura pequena), 'md' (largura média) ou 'lg' (largura grande). Sem valor, o breakpoint é medido pela largura do próprio ContainerPanel.

Use 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

children​

Typenode
Description​

Filhos do painel.

ContainerPanel é também um Container, portanto pode conter subcomponentes como ContainerHeader, ContainerContent e ContainerFooter.

Filhos que não sejam uma desses subcomponentes são colocados automaticamente em um ContainerContent.

onToggle​

Typefunc
Paramevent React.SyntheticEvent - A origem do evento que acionou o callback.
Paramshow boolean - Indica se o ContainerPanel pretende ser exibido (true) ou escondido (false).
Paraminfos object - Informações adicionais.
  • infos.reason string - Razão para o acionamento do callback,
Description​

Callback acionado quando o ContainerPanel pretende ser exibido ou escondido.

podendo ser (a) 'closeButton': o usuário clicou no botão de fechamento, (b) 'clickOutside': o usuário clicou fora do ContainerPanel (não inclui o botão de fechamento) e (c) 'esc': o usuário pressionou ESC.

Os casos (b) e (c) só ocorrem quando o ContainerPanel é uma Drawer em telas médias (md).

<ContainerSidebar />​

Import​

import { ContainerSidebar } from '@resultadosdigitais/tangram-components'

Properties​

layout​

Type
Enum of:
  • 'full'
  • 'padded'
  • 'contained'
Default'padded'
Description​

Define o layout da barra lateral, podendo ser 'full' (ocupa toda largura, sem espaçamento), 'padded' (ocupa toda largura, com espaçamento) ou 'contained' (com largura limitada e com espaçamento).

Sem valor, herda o layout do Container pai.

activeSection​

Type
Enum of:
  • 'sidebar'
  • 'main'
  • 'panel'
Description​

Define a seção ativa para largura pequena (sm), podendo ser 'sidebar' para a barra lateral, 'main' para conteúdo principal ou 'panel' para o painel.

Nas demais larguras, todas as seções permanecem visíveis.

breakpoint​

Type
Enum of:
  • 'sm'
  • 'md'
  • 'lg'
Description​

Fixa o breakpoint da barra lateral em 'sm' (largura pequena), 'md' (largura média) ou 'lg' (largura grande). Sem valor, o breakpoint é medido pela largura do próprio ContainerSidebar.

Use 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

children​

Typenode
Description​

Filhos da barra lateral.

ContainerSidebar é também um Container, portanto pode conter subcomponentes como ContainerHeader, ContainerContent e ContainerFooter.

Filhos que não sejam uma desses subcomponentes são colocados automaticamente em um ContainerContent.

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.