布局容器 Container

你可以用它来搭建页面基本结构，太棒了，简直像魔法一样！它包括以下几个部分

• Container：外层容器；
• Header：页头区域；
• Footer：页脚区域；
• Main：主体内容区域；
• Aside：侧边栏区域。

常见页面布局

Header

Main

Footer

隐藏源代码

Header

Aside Left

Main

Footer

隐藏源代码

Header

Aside

Aside

Main

Footer

隐藏源代码

Header

Aside Left

Main

Aside Right

Footer

隐藏源代码

布局边框

Header、Footer、Aside 可以用 bordered 属性设置展示边框，Aside 组件 side 属性用于标记侧边栏位置，从而修改边框展示的位置。

Header

Aside Left

Main

Aside Right

Footer

隐藏源代码

强调布局

Header、Footer、Aside 可以用 dark 属性开启深色模式。

Header

Aside

Aside

Main

Footer

隐藏源代码

柔和背景

主体内容区域组件 Main 可以用 soft 属性设置展示浅灰色的柔和背景。

Header

Aside Left

Main

Footer

隐藏源代码

API

ContainerProps

属性	类型	可选	默认值	描述	版本
direction	'horizontal' | 'vertical'	是		子元素排列方向，如果有 Aside 子组件，默认为 'vertical'，否则为 'horizontal'。	0.0.0-beta

ContainerSlots

插槽	参数	描述	版本
default		用于传入子布局容器组件。	0.0.0-beta

MainProps

属性	类型	可选	默认值	描述	版本
soft	boolean	是	false	浅灰色柔和背景。	0.0.3

MainSlots

插槽	参数	描述	版本
default		主体区域的内容。	0.0.0-beta

HeaderProps

属性	类型	可选	默认值	描述	版本
minHeight	string | number	是	64	Header 组件最小高度。	0.0.0-beta
bordered	boolean	是	false	Header 组件是否展示边框。	0.0.0-beta
dark	boolean	是	false	Header 组件是否为深色模式。	0.0.0-beta

HeaderSlots

插槽	参数	描述	版本
default		页头区域的内容。	0.0.0-beta

FooterProps

属性	类型	可选	默认值	描述	版本
minHeight	string | number	是	64	Footer 组件最小高度。	0.0.0-beta
bordered	boolean	是	false	Footer 组件是否展示边框。	0.0.0-beta
dark	boolean	是	false	Footer 组件是否为深色模式。	0.0.0-beta

FooterSlots

插槽	参数	描述	版本
default		页脚区域的内容。	0.0.0-beta

AsideProps

属性	类型	可选	默认值	描述	版本
width	string | number	是	300	Aside 组件宽度。	0.0.0-beta
bordered	boolean	是	false	Aside 组件是否展示边框。	0.0.0-beta
side	'left' | 'right'	是	'left'	属性用于标记侧边栏位置，从而修改边框展示的位置，为 'left' 则边框出现在右侧，为 'right' 则出现在左侧。	0.0.0-beta
dark	boolean	是	false	Aside 组件是否为深色模式。	0.0.0-beta

AsideSlots

插槽	参数	描述	版本
default		侧边栏区域的内容。	0.0.0-beta