logo
导航

Main

基础用法

基本的主内容区域,自动处理不同屏幕尺寸下的布局和内边距

页面标题

页面内容

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

自定义容器尺寸

通过 size 属性调整容器宽度

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

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

自定义内边距

通过 padding 和 verticalPadding 属性调整内边距大小

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

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

自定义背景颜色

通过 backgroundColor 属性设置背景颜色

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

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