Main
Introduction
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.
Key Features
- Responsive Layout: Automatically adjusts padding and width for different screen sizes
- Flexible Configuration: Supports custom container sizes, padding, and background colors
- Layout Control: Supports both row and column layout modes
- Article Mode: Supports article layout with automatic table of contents generation
- Property Validation: Automatically detects property conflicts and displays error messages
Examples
页面标题
页面内容
---
/**
* @component MainBasic
* @description Main 组件基础用法示例
*/
import { Main } from "@coffic/cosy-ui";
---
<Main>
<h1>页面标题</h1>
<p>页面内容</p>
</Main>
Props
backgroundColor
Set the background color, supporting theme colors or custom color values.
这个主内容区域有主题色背景
主题色背景
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
Set the border size, supporting different border thicknesses.
无边框
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
Whether to center the content, defaults to true.
页面标题
页面内容
---
/**
* @component MainBasic
* @description Main 组件基础用法示例
*/
import { Main } from "@coffic/cosy-ui";
---
<Main>
<h1>页面标题</h1>
<p>页面内容</p>
</Main>
class
Custom CSS class name for overriding default styles.
页面标题
页面内容
---
/**
* @component MainBasic
* @description Main 组件基础用法示例
*/
import { Main } from "@coffic/cosy-ui";
---
<Main>
<h1>页面标题</h1>
<p>页面内容</p>
</Main>
id
HTML id attribute for uniquely identifying the element.
页面标题
页面内容
---
/**
* @component MainBasic
* @description Main 组件基础用法示例
*/
import { Main } from "@coffic/cosy-ui";
---
<Main>
<h1>页面标题</h1>
<p>页面内容</p>
</Main>
isArticle
Whether to use article layout mode. When set to true, enables article mode with table of contents generation.
文章标题
这是文章的开头段落，介绍文章的主要内容。
第一章：基础概念
这里介绍基础概念的内容...
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
Layout mode, supports row (horizontal layout) and column (vertical layout).
左侧内容
这是左侧的内容区域
右侧内容
这是右侧的内容区域
上方内容
这是上方的内容区域
下方内容
这是下方的内容区域
---
/**
* @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
Horizontal padding, set through the Container component’s padding property.
这个主内容区域有更大的内边距
---
/**
* @component MainCustomPadding
* @description Main 组件自定义内边距示例
*/
import { Main } from "@coffic/cosy-ui";
---
<Main verticalPadding="lg" padding="xl">
<p>这个主内容区域有更大的内边距</p>
</Main>
pb
Bottom padding, takes priority over py property when in conflict.
轴向内边距示例
这个示例展示了垂直内边距 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
Left padding, takes priority over px property when in conflict.
轴向内边距示例
这个示例展示了垂直内边距 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
Right padding, takes priority over px property when in conflict.
轴向内边距示例
这个示例展示了垂直内边距 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
Top padding, takes priority over py property when in conflict.
轴向内边距示例
这个示例展示了垂直内边距 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
Horizontal padding, takes priority over pl/pr properties when in conflict.
轴向内边距示例
这个示例展示了垂直内边距 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
Vertical padding, takes priority over pt/pb properties when in conflict.
轴向内边距示例
这个示例展示了垂直内边距 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
Whether to show the table of contents, only effective in article mode.
文章标题
这是文章的开头段落，介绍文章的主要内容。
第一章：基础概念
这里介绍基础概念的内容...
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
Container size, controls the maximum width of the content area.
小尺寸容器
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
The main content area of the Main component, can contain any HTML elements.
页面标题
页面内容
---
/**
* @component MainBasic
* @description Main 组件基础用法示例
*/
import { Main } from "@coffic/cosy-ui";
---
<Main>
<h1>页面标题</h1>
<p>页面内容</p>
</Main>