Container 布局容器
用于布局的容器组件,方便快速搭建页面的基本结构:
<z-container>
:外层容器。 当子元素中包含 <z-header>
或 <z-footer>
时,全部子元素会垂直上下排列, 否则会水平左右排列。
<z-header>
:顶栏容器。
<z-aside>
:侧边栏容器。
<z-main>
:主要区域容器。
<z-footer>
:底栏容器。
TIP
以上组件采用了 flex 布局,使用前请确定目标浏览器是否兼容。
常见页面布局
Container API
Container 属性
属性名 | 说明 | 类型 | 默认 |
---|---|---|---|
direction | 子元素的排列方向 | enum | 子元素中有 z-header 或 z-footer 时为 vertical,否则为 horizontal |
Container 插槽
插槽名 | 说明 | 子标签 |
---|---|---|
default | 自定义默认内容 | Container / Header / Aside / Main / Footer |
Header API
Header 属性
属性名 | 说明 | 类型 | 默认 |
---|---|---|---|
height | 顶栏高度 | string | 60px |
Header 插槽
插槽名 | 说明 |
---|---|
default | 自定义默认内容 |
Aside API
Aside 属性
属性名 | 说明 | 类型 | 默认 |
---|---|---|---|
width | 侧边栏宽度 | string | 300px |
Aside 插槽
插槽名 | 说明 |
---|---|
default | 自定义默认内容 |
Main API
Main 插槽
插槽名 | 说明 |
---|---|
default | 自定义默认内容 |
Footer API
Footer 属性
属性名 | 说明 | 类型 | 默认 |
---|---|---|---|
height | 底栏高度 | string | 60px |
Footer 插槽
插槽名 | 说明 |
---|---|
default | 自定义默认内容 |