logo
导航

Main

Basic Usage

Basic main content area, automatically handling layout and padding for different screen sizes

页面标题

页面内容

<Main>
<h1>Page Title</h1>
<p>Page content</p>
</Main>

Custom Container Size

Adjust container width using the size property

This is a wider main content area

<Main size="lg">
<p>This is a wider main content area</p>
</Main>

Custom Padding

Adjust padding size using the padding and verticalPadding properties

This main content area has larger padding

<Main padding="lg" verticalPadding="xl">
<p>This main content area has larger padding</p>
</Main>

Custom Background Color

Set background color using the backgroundColor property

This main content area has a theme color background

<Main backgroundColor="primary">
<p>This main content area has a theme color background</p>
</Main>