Main
简介
Main 组件是页面的主要内容区域，使用 Container 组件提供响应式布局。它适合作为页面的主体部分，自动处理不同屏幕尺寸下的布局和内边距。
主要特性
- 响应式布局：在不同屏幕尺寸下自动调整内边距和宽度
- 灵活配置：支持自定义容器尺寸、内边距和背景颜色
- 布局控制：支持行布局和列布局两种方式
- 文章模式：支持文章布局和自动目录生成
- 属性验证：自动检测属性冲突并显示错误提示
案例
页面标题
页面内容
---
/**
* @component MainBasic
* @description Main 组件基础用法示例
*/
import { Main } from "@coffic/cosy-ui";
---
<Main>
<h1>页面标题</h1>
<p>页面内容</p>
</Main>
Props
backgroundColor
设置背景颜色，支持主题色或自定义颜色值。
这个主内容区域有主题色背景
主题色背景
backgroundColor="primary" - 使用主题色作为背景
次要色背景
backgroundColor="secondary" - 使用次要色作为背景
强调色背景
backgroundColor="accent" - 使用强调色作为背景
基础色背景
backgroundColor="base-200" - 使用基础色作为背景
自定义颜色背景
backgroundColor="#f0f9ff" - 使用自定义颜色值作为背景
---
/**
* @component MainCustomBg
* @description Main 组件自定义背景色示例
*/
import { Main } from "@coffic/cosy-ui";
---
<Main backgroundColor="primary">
<p>这个主内容区域有主题色背景</p>
</Main>
---
/**
* @component MainBgPrimary
* @description Main 组件主题色背景示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main backgroundColor="primary" border="md">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>主题色背景</h3>
<p>backgroundColor="primary" - 使用主题色作为背景</p>
</div>
</PlaceHolder>
</Main>
---
/**
* @component MainBgSecondary
* @description Main 组件次要色背景示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main backgroundColor="secondary" border="md">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>次要色背景</h3>
<p>backgroundColor="secondary" - 使用次要色作为背景</p>
</div>
</PlaceHolder>
</Main>
---
/**
* @component MainBgAccent
* @description Main 组件强调色背景示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main backgroundColor="accent" border="md">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>强调色背景</h3>
<p>backgroundColor="accent" - 使用强调色作为背景</p>
</div>
</PlaceHolder>
</Main>
---
/**
* @component MainBgBase200
* @description Main 组件基础色背景示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main backgroundColor="base-200" border="md">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>基础色背景</h3>
<p>backgroundColor="base-200" - 使用基础色作为背景</p>
</div>
</PlaceHolder>
</Main>
---
/**
* @component MainBgCustom
* @description Main 组件自定义颜色背景示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main backgroundColor="#f0f9ff" border="md">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>自定义颜色背景</h3>
<p>backgroundColor="#f0f9ff" - 使用自定义颜色值作为背景</p>
</div>
</PlaceHolder>
</Main>
border
设置边框尺寸，支持不同粗细的边框。
无边框
border="none" - 不显示边框
小边框
border="sm" - 使用小尺寸边框
边框示例
border="md" - 使用中等尺寸边框
大边框
border="lg" - 使用大尺寸边框
超大边框
border="xl" - 使用超大尺寸边框
---
/**
* @component MainBorderNone
* @description Main 组件无边框示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main border="none">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>无边框</h3>
<p>border="none" - 不显示边框</p>
</div>
</PlaceHolder>
</Main>
---
/**
* @component MainBorderSm
* @description Main 组件小边框示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main border="sm">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>小边框</h3>
<p>border="sm" - 使用小尺寸边框</p>
</div>
</PlaceHolder>
</Main>
---
/**
* @component MainBorder
* @description Main 组件边框示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main border="md">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>边框示例</h3>
<p>border="md" - 使用中等尺寸边框</p>
</div>
</PlaceHolder>
</Main>
---
/**
* @component MainBorderLg
* @description Main 组件大边框示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main border="lg">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>大边框</h3>
<p>border="lg" - 使用大尺寸边框</p>
</div>
</PlaceHolder>
</Main>
---
/**
* @component MainBorderXl
* @description Main 组件超大边框示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main border="xl">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>超大边框</h3>
<p>border="xl" - 使用超大尺寸边框</p>
</div>
</PlaceHolder>
</Main>
centered
是否居中显示内容，默认为 true。
页面标题
页面内容
---
/**
* @component MainBasic
* @description Main 组件基础用法示例
*/
import { Main } from "@coffic/cosy-ui";
---
<Main>
<h1>页面标题</h1>
<p>页面内容</p>
</Main>
class
自定义 CSS 类名，用于覆盖默认样式。
页面标题
页面内容
---
/**
* @component MainBasic
* @description Main 组件基础用法示例
*/
import { Main } from "@coffic/cosy-ui";
---
<Main>
<h1>页面标题</h1>
<p>页面内容</p>
</Main>
id
HTML id 属性，用于唯一标识元素。
页面标题
页面内容
---
/**
* @component MainBasic
* @description Main 组件基础用法示例
*/
import { Main } from "@coffic/cosy-ui";
---
<Main>
<h1>页面标题</h1>
<p>页面内容</p>
</Main>
isArticle
是否为文章布局，设置为 true 时会启用文章模式并支持目录生成。
文章标题
这是文章的开头段落，介绍文章的主要内容。
第一章：基础概念
这里介绍基础概念的内容...
1.1 核心原理
核心原理的详细说明...
第二章：实践应用
实践应用的相关内容...
2.1 案例分析
案例分析的具体内容...
第三章：总结
文章的总结内容...
普通模式标题
这是普通模式的内容，不会自动生成目录。
子标题
普通模式下的子标题内容...
---
/**
* @component MainArticle
* @description Main 组件文章模式示例
*/
import { Main } from "@coffic/cosy-ui";
---
<Main isArticle={true} showTableOfContents={true} currentLocale="zh-cn">
<h1>文章标题</h1>
<p>这是文章的开头段落，介绍文章的主要内容。</p>
<h2>第一章：基础概念</h2>
<p>这里介绍基础概念的内容...</p>
<h3>1.1 核心原理</h3>
<p>核心原理的详细说明...</p>
<h2>第二章：实践应用</h2>
<p>实践应用的相关内容...</p>
<h3>2.1 案例分析</h3>
<p>案例分析的具体内容...</p>
<h2>第三章：总结</h2>
<p>文章的总结内容...</p>
</Main>
---
/**
* @component MainNormal
* @description Main 组件普通模式示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main>
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h1>普通模式标题</h1>
<p>这是普通模式的内容，不会自动生成目录。</p>
<h2>子标题</h2>
<p>普通模式下的子标题内容...</p>
</div>
</PlaceHolder>
</Main>
layout
布局方式，支持 row（行布局）和 column（列布局）。
左侧内容
这是左侧的内容区域
右侧内容
这是右侧的内容区域
上方内容
这是上方的内容区域
下方内容
这是下方的内容区域
---
/**
* @component MainLayout
* @description Main 组件布局方式示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main layout="row" style="gap: 1rem;">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>左侧内容</h3>
<p>这是左侧的内容区域</p>
</div>
</PlaceHolder>
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>右侧内容</h3>
<p>这是右侧的内容区域</p>
</div>
</PlaceHolder>
</Main>
---
/**
* @component MainLayoutColumn
* @description Main 组件列布局示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main layout="column" style="gap: 1rem;">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>上方内容</h3>
<p>这是上方的内容区域</p>
</div>
</PlaceHolder>
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>下方内容</h3>
<p>这是下方的内容区域</p>
</div>
</PlaceHolder>
</Main>
padding
水平内边距，通过 Container 组件的 padding 属性设置。
这个主内容区域有更大的内边距
---
/**
* @component MainCustomPadding
* @description Main 组件自定义内边距示例
*/
import { Main } from "@coffic/cosy-ui";
---
<Main verticalPadding="lg" padding="xl">
<p>这个主内容区域有更大的内边距</p>
</Main>
pb
底部内边距，与 py 属性冲突时优先使用此属性。
轴向内边距示例
这个示例展示了垂直内边距 py="lg" 和水平内边距 px="xl" 的效果
单独内边距示例
这个示例展示了单独设置 pt、pb、pl、pr 的效果
---
/**
* @component MainPaddingAxis
* @description Main 组件轴向内边距示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main py="lg" px="xl" border="md">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>轴向内边距示例</h3>
<p>这个示例展示了垂直内边距 py="lg" 和水平内边距 px="xl" 的效果</p>
</div>
</PlaceHolder>
</Main>
---
/**
* @component MainPaddingIndividual
* @description Main 组件单独内边距示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main pt="lg" pb="xl" pl="md" pr="lg" border="md">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>单独内边距示例</h3>
<p>这个示例展示了单独设置 pt、pb、pl、pr 的效果</p>
</div>
</PlaceHolder>
</Main>
pl
左侧内边距，与 px 属性冲突时优先使用此属性。
轴向内边距示例
这个示例展示了垂直内边距 py="lg" 和水平内边距 px="xl" 的效果
单独内边距示例
这个示例展示了单独设置 pt、pb、pl、pr 的效果
---
/**
* @component MainPaddingAxis
* @description Main 组件轴向内边距示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main py="lg" px="xl" border="md">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>轴向内边距示例</h3>
<p>这个示例展示了垂直内边距 py="lg" 和水平内边距 px="xl" 的效果</p>
</div>
</PlaceHolder>
</Main>
---
/**
* @component MainPaddingIndividual
* @description Main 组件单独内边距示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main pt="lg" pb="xl" pl="md" pr="lg" border="md">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>单独内边距示例</h3>
<p>这个示例展示了单独设置 pt、pb、pl、pr 的效果</p>
</div>
</PlaceHolder>
</Main>
pr
右侧内边距，与 px 属性冲突时优先使用此属性。
轴向内边距示例
这个示例展示了垂直内边距 py="lg" 和水平内边距 px="xl" 的效果
单独内边距示例
这个示例展示了单独设置 pt、pb、pl、pr 的效果
---
/**
* @component MainPaddingAxis
* @description Main 组件轴向内边距示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main py="lg" px="xl" border="md">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>轴向内边距示例</h3>
<p>这个示例展示了垂直内边距 py="lg" 和水平内边距 px="xl" 的效果</p>
</div>
</PlaceHolder>
</Main>
---
/**
* @component MainPaddingIndividual
* @description Main 组件单独内边距示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main pt="lg" pb="xl" pl="md" pr="lg" border="md">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>单独内边距示例</h3>
<p>这个示例展示了单独设置 pt、pb、pl、pr 的效果</p>
</div>
</PlaceHolder>
</Main>
pt
顶部内边距，与 py 属性冲突时优先使用此属性。
轴向内边距示例
这个示例展示了垂直内边距 py="lg" 和水平内边距 px="xl" 的效果
单独内边距示例
这个示例展示了单独设置 pt、pb、pl、pr 的效果
---
/**
* @component MainPaddingAxis
* @description Main 组件轴向内边距示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main py="lg" px="xl" border="md">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>轴向内边距示例</h3>
<p>这个示例展示了垂直内边距 py="lg" 和水平内边距 px="xl" 的效果</p>
</div>
</PlaceHolder>
</Main>
---
/**
* @component MainPaddingIndividual
* @description Main 组件单独内边距示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main pt="lg" pb="xl" pl="md" pr="lg" border="md">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>单独内边距示例</h3>
<p>这个示例展示了单独设置 pt、pb、pl、pr 的效果</p>
</div>
</PlaceHolder>
</Main>
px
水平内边距，与 pl/pr 属性冲突时优先使用此属性。
轴向内边距示例
这个示例展示了垂直内边距 py="lg" 和水平内边距 px="xl" 的效果
单独内边距示例
这个示例展示了单独设置 pt、pb、pl、pr 的效果
---
/**
* @component MainPaddingAxis
* @description Main 组件轴向内边距示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main py="lg" px="xl" border="md">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>轴向内边距示例</h3>
<p>这个示例展示了垂直内边距 py="lg" 和水平内边距 px="xl" 的效果</p>
</div>
</PlaceHolder>
</Main>
---
/**
* @component MainPaddingIndividual
* @description Main 组件单独内边距示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main pt="lg" pb="xl" pl="md" pr="lg" border="md">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>单独内边距示例</h3>
<p>这个示例展示了单独设置 pt、pb、pl、pr 的效果</p>
</div>
</PlaceHolder>
</Main>
py
垂直内边距，与 pt/pb 属性冲突时优先使用此属性。
轴向内边距示例
这个示例展示了垂直内边距 py="lg" 和水平内边距 px="xl" 的效果
单独内边距示例
这个示例展示了单独设置 pt、pb、pl、pr 的效果
---
/**
* @component MainPaddingAxis
* @description Main 组件轴向内边距示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main py="lg" px="xl" border="md">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>轴向内边距示例</h3>
<p>这个示例展示了垂直内边距 py="lg" 和水平内边距 px="xl" 的效果</p>
</div>
</PlaceHolder>
</Main>
---
/**
* @component MainPaddingIndividual
* @description Main 组件单独内边距示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main pt="lg" pb="xl" pl="md" pr="lg" border="md">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>单独内边距示例</h3>
<p>这个示例展示了单独设置 pt、pb、pl、pr 的效果</p>
</div>
</PlaceHolder>
</Main>
showTableOfContents
是否显示目录，仅在文章模式下有效。
文章标题
这是文章的开头段落，介绍文章的主要内容。
第一章：基础概念
这里介绍基础概念的内容...
1.1 核心原理
核心原理的详细说明...
第二章：实践应用
实践应用的相关内容...
2.1 案例分析
案例分析的具体内容...
第三章：总结
文章的总结内容...
普通模式标题
这是普通模式的内容，不会自动生成目录。
子标题
普通模式下的子标题内容...
---
/**
* @component MainArticle
* @description Main 组件文章模式示例
*/
import { Main } from "@coffic/cosy-ui";
---
<Main isArticle={true} showTableOfContents={true} currentLocale="zh-cn">
<h1>文章标题</h1>
<p>这是文章的开头段落，介绍文章的主要内容。</p>
<h2>第一章：基础概念</h2>
<p>这里介绍基础概念的内容...</p>
<h3>1.1 核心原理</h3>
<p>核心原理的详细说明...</p>
<h2>第二章：实践应用</h2>
<p>实践应用的相关内容...</p>
<h3>2.1 案例分析</h3>
<p>案例分析的具体内容...</p>
<h2>第三章：总结</h2>
<p>文章的总结内容...</p>
</Main>
---
/**
* @component MainNormal
* @description Main 组件普通模式示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main>
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h1>普通模式标题</h1>
<p>这是普通模式的内容，不会自动生成目录。</p>
<h2>子标题</h2>
<p>普通模式下的子标题内容...</p>
</div>
</PlaceHolder>
</Main>
size
容器大小，控制内容区域的最大宽度。
小尺寸容器
size="sm" - 适合紧凑布局
中等尺寸容器
size="md" - 默认尺寸，适合大多数场景
大尺寸容器
size="lg" - 适合需要更多空间的内容
超大尺寸容器
size="xl" - 适合宽屏显示
全宽容器
size="full" - 占满整个容器宽度
---
/**
* @component MainSize
* @description Main 组件容器尺寸示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main size="sm" border="md">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>小尺寸容器</h3>
<p>size="sm" - 适合紧凑布局</p>
</div>
</PlaceHolder>
</Main>
---
/**
* @component MainSizeMd
* @description Main 组件中等尺寸示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main size="md" border="md">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>中等尺寸容器</h3>
<p>size="md" - 默认尺寸，适合大多数场景</p>
</div>
</PlaceHolder>
</Main>
---
/**
* @component MainSizeLg
* @description Main 组件大尺寸示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main size="lg" border="md">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>大尺寸容器</h3>
<p>size="lg" - 适合需要更多空间的内容</p>
</div>
</PlaceHolder>
</Main>
---
/**
* @component MainSizeXl
* @description Main 组件超大尺寸示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main size="xl" border="md">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>超大尺寸容器</h3>
<p>size="xl" - 适合宽屏显示</p>
</div>
</PlaceHolder>
</Main>
---
/**
* @component MainSizeFull
* @description Main 组件全宽尺寸示例
*/
import { Main, PlaceHolder } from "@coffic/cosy-ui";
---
<Main size="full" border="md">
<PlaceHolder width="full" height="md" padding="md" background="base-200">
<div>
<h3>全宽容器</h3>
<p>size="full" - 占满整个容器宽度</p>
</div>
</PlaceHolder>
</Main>
Slots
default
Main 组件的主要内容区域，可以包含任何 HTML 元素。
页面标题
页面内容
---
/**
* @component MainBasic
* @description Main 组件基础用法示例
*/
import { Main } from "@coffic/cosy-ui";
---
<Main>
<h1>页面标题</h1>
<p>页面内容</p>
</Main>