Components

Container 页面容器

规范响应式最大宽度（sm、md、lg、xl、2xl、full）与水平内边距节奏的页面级排版容器，常与 Section、Navbar 或文档主体配合使用。

基础容器与尺寸对比

内置 max-w 尺寸预设与响应式水平 padding（px-4 sm:px-6 lg:px-8），保持全站对齐统一。

Container (sm · max-w-2xl)

Container (md · max-w-4xl)

Container (lg · max-w-6xl)

Container (xl · max-w-7xl · 默认推荐)

<Container size="sm">Small Container</Container>
<Container size="md">Medium Container</Container>
<Container size="lg">Large Container</Container>
<Container size="xl">Default XL Container</Container>

自定义标签与无内边距模式

可通过 as 属性渲染为 main/article/section 等语义化标签，并支持 padded: false 实现完全贴边。

无内边距容器包裹卡片

当内部子元素已具备自身内边距时，禁用容器内边距以避免层叠 padding。

<Container as="article" :padded="false" size="md">
  <h3>无内边距容器包裹卡片</h3>
  <p>内容...</p>
</Container>

API 参考

属性	类型	默认值	说明
`as`	`string`	`'div'`	渲染出的底层 HTML 标签。
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full'`	`'xl'`	响应式最大宽度限制。
`padded`	`boolean`	`true`	是否添加响应式水平内边距（px-4 sm:px-6 lg:px-8）。
`class`	`any`	`undefined`	自定义样式类名。