Container

Os contêineres são utilizados para restringir a largura de um conteúdo ao ponto de interrupção atual, mantendo-o fluido.

Por padrão, ele define a largura máxima do conteúdo para 1140px, mas você pode personalizar este comportamento através da propriedade maxWidth.

Importação

import { Container } from '@escaletech/delta'

Utilização

Editor de código

<Container> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </Container>

<Container>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</Container>

Resultado

Loading...

Definindo a largura máxima

Para definir a largura máxima de um Container, use o atributo maxWidth.

Editor de código

<Base> <Container maxWidth={1200}>Esta div possui 1200px de largura máxima</Container> <Container maxWidth={800}>Esta div possui 800px de largura máxima</Container> <Container maxWidth={600}>Esta div possui 600px de largura máxima</Container> <Container maxWidth={400}>Esta div possui 400px de largura máxima</Container> </Base>

<Base>
  <Container maxWidth={1200}>Esta div possui 1200px de largura máxima</Container>
  <Container maxWidth={800}>Esta div possui 800px de largura máxima</Container>
  <Container maxWidth={600}>Esta div possui 600px de largura máxima</Container>
  <Container maxWidth={400}>Esta div possui 400px de largura máxima</Container>
</Base>

Resultado

Loading...

Customização

Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de tema.

import { extendsTheme } from '@escaletech/delta'

export const theme = extendsTheme({
  sizes: {
    screenWidth: '1140px'
  }
})

Tokens

Token	Descrição
sizes.screenWidth	Limite de largura do Container. Por padrão, é 1140px

Props

Propriedade	Descrição	Tipo	Padrão	Obrigatório
children	Conteúdo do componente	ReactNode	_	✅
maxWidth	Delimitação do conteúdo	number	1140	❌