Vite vui

layout 容器布局

用于布局的容器组件，方便快速搭建页面的基本结构：

<vi-layout >: 容器

<vi-layout-header>：顶栏容器

<vi-layout-sider>：侧边栏容器

<vi-layout-main>：主要区域容器

<vi-layout-footer>：底栏容器

基本用法

header
main
footer

代码演示

export default {
  render() {
    return (
      <vi-layout>
        <vi-layout-header>header</vi-layout-header>
        <vi-layout>
          <vi-layout-sider>sider</vi-layout-sider>
          <vi-layout-main>main</vi-layout-main>
        </vi-layout>
        <vi-layout-footer>footer</vi-layout-footer>
      </vi-layout>
    );
  },
};

API

<vi-layout-sider />

侧边组件

参数说明类型可选值默认值
width<vi-layout-sider /> 宽度控制string-200px

<vi-layout-header />

头部组件

参数说明类型可选值默认值
height<vi-layout-header /> 高度控制string-64px

底部组件

参数说明类型可选值默认值
height<vi-layout-footer /> 高度控制string-64px