Main

Main 组件是页面的主要内容区域，使用 Container 组件提供响应式布局。适合作为页面主体，自动处理不同屏幕尺寸下的布局和内边距。

基础用法

页面标题

页面内容

---
/**
 * @component MainBasic
 * @description Main 组件基础用法示例
 */
import { Main } from '@coffic/cosy-ui';
---

<Main>
  <h1>页面标题</h1>
  <p>页面内容</p>
</Main>

自定义容器尺寸

这是一个较宽的主内容区域

---
/**
 * @component MainCustomSize
 * @description Main 组件自定义容器尺寸示例
 */
import { Main } from '@coffic/cosy-ui';
---

<Main size="lg">
  <p>这是一个较宽的主内容区域</p>
</Main>

自定义内边距

这个主内容区域有更大的内边距

---
/**
 * @component MainCustomPadding
 * @description Main 组件自定义内边距示例
 */
import { Main } from '@coffic/cosy-ui';
---

<Main verticalPadding="lg" padding="xl">
  <p>这个主内容区域有更大的内边距</p>
</Main>

自定义背景颜色

这个主内容区域有主题色背景

---
/**
 * @component MainCustomBg
 * @description Main 组件自定义背景色示例
 */
import { Main } from '@coffic/cosy-ui';
---

<Main backgroundColor="primary">
  <p>这个主内容区域有主题色背景</p>
</Main>