Container 容器

用于页面布局的带可配置最大宽度的居中内容容器。

引入

import { Container } from 'asterui'

示例

基本用法

Container 提供带最大宽度和响应式内边距的居中内容。

</>

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

页面布局

页面内容的典型用法。

</>

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

属性	描述	类型	默认值
children	容器内容	React.ReactNode	-
size	最大宽度尺寸	'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'	'xl'
centered	水平居中容器	boolean	true
padding	添加横向内边距	boolean	true
className	额外的 CSS 类名	string	-