Container

Contêiner de conteúdo centralizado com largura máxima configurável para layouts de página.

Importação

import { Container } from 'asterui'

Exemplos

Uso Básico

Container fornece conteúdo centralizado com largura máxima e padding responsivo.

</>

Page Content

Content is centered with max-width constraint.

import { Container } from 'asterui'

function App() {
  return (
      <Container>
        <h1>Page Content</h1>
        <p>Content is centered with max-width constraint.</p>
      </Container>
    )
}

export default App

Layout de Página

Uso típico para conteúdo de página.

</>

Page Title

Description

Main content area

import { Container, Space } from 'asterui'

function App() {
  return (
      <Container size="lg">
        <Space direction="vertical" size="lg">
          <header>
            <h1 className="text-3xl font-bold">Page Title</h1>
            <p className="text-base-content/70">Description</p>
          </header>
          <main className="bg-base-200 p-6 rounded-lg">
            <p>Main content area</p>
          </main>
        </Space>
      </Container>
    )
}

export default App

API

Container

Propriedade	Descrição	Tipo	Padrão
children	Conteúdo do container	React.ReactNode	-
size	Tamanho de largura máxima	'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'	'xl'
centered	Centralizar container horizontalmente	boolean	true
padding	Adicionar padding horizontal	boolean	true
className	Classes CSS adicionais	string	-