Main

The Main component is the main content area of the page, using the Container component to provide a responsive layout. It is suitable as the main part of the page and automatically handles layout and padding for different screen sizes.

Basic Usage

页面标题

页面内容

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

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

Custom Container Size

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

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

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

Custom Padding

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

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

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

Custom Background Color

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

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

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