Container

Contenedor de contenido centrado con ancho máximo configurable para diseños de página.

Importar

import { Container } from 'asterui'

Ejemplos

Uso Básico

Container proporciona contenido centrado con ancho máximo y relleno 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

Diseño de Página

Uso típico para contenido 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

Propiedad	Descripción	Tipo	Predeterminado
children	Contenido del contenedor	React.ReactNode	-
size	Tamaño de ancho máximo	'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'	'xl'
centered	Centrar contenedor horizontalmente	boolean	true
padding	Agregar relleno horizontal	boolean	true
className	Clases CSS adicionales	string	-