Container

Conteneur de contenu centré avec largeur maximale configurable pour les mises en page de page.

Import

import { Container } from 'asterui'

Exemples

Utilisation de base

Le Container fournit un contenu centré avec largeur maximale et marge intérieure responsive.

</>

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

Mise en page de page

Utilisation typique pour le contenu de page.

</>

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

Propriété	Description	Type	Défaut
children	Contenu du conteneur	React.ReactNode	-
size	Taille de largeur maximale	'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'	'xl'
centered	Centrer le conteneur horizontalement	boolean	true
padding	Ajouter une marge intérieure horizontale	boolean	true
className	Classes CSS supplémentaires	string	-