Section

基础区块

最简单的 Section 使用方式，用于划分页面的不同内容区域

默认区块内容

<Section>
<p>默认区块内容</p>
</Section>

不同背景的区块

通过 background 属性设置区块的背景样式，支持 transparent、white、gray、primary、secondary 和 dark

灰色背景的区块

<Section background="gray">
<p>灰色背景的区块</p>
</Section>

自定义内边距

通过 padding 属性调整区块的内边距大小，支持 none、sm、md、lg 和 xl

大内边距的区块

<Section padding="lg">
<p>大内边距的区块</p>
</Section>

内容居中的区块

设置 centered 属性为 true 使区块内容居中显示

居中标题

居中显示的内容

<Section centered={true}>
<h3>居中标题</h3>
<p>居中显示的内容</p>
</Section>

不使用容器的区块

设置 container 属性为 false 可以不使用内部的 Container 组件包裹内容

没有使用容器包裹的内容，将占满整个区块宽度

<Section container={false} background="primary">
<p>没有使用容器包裹的内容，将占满整个区块宽度</p>
</Section>

自定义容器尺寸

通过 containerSize 属性设置内部容器的尺寸，仅当 container 为 true 时有效

使用小尺寸容器的区块

<Section containerSize="sm" background="secondary">
<p>使用小尺寸容器的区块</p>
</Section>

深色背景区块

使用 dark 背景创建深色区块，文字自动变为白色

深色区块

深色背景区块中的文字会自动变为白色

<Section background="dark">
<h3>深色区块</h3>
<p>深色背景区块中的文字会自动变为白色</p>
</Section>

完整示例

展示 Section 组件的多种属性组合使用

特色区块

使用主题色背景、超大内边距、内容居中显示，并使用大尺寸容器

<Section 
background="primary" 
padding="xl" 
centered={true}
containerSize="lg"
class="my-custom-class"
>
<div class="py-8">
  <h2 class="text-2xl font-bold mb-4">特色区块</h2>
  <p>使用主题色背景、超大内边距、内容居中显示，并使用大尺寸容器</p>
</div>
</Section>