默认主题
布局

示例

menu 1
menu 2
menu 3
menu 4
menu 1
sub menu 1
sub menu 2
sub menu 3
sub menu 4
menu 2
menu 3
sub menu 1
sub menu 2
sub menu 3
sub menu 4
menu 4
Home>
Detail
content
上下布局
  1. Layout: 布局容器,其下可嵌套Header Aside Body Footer以及Layout,可以放置任何容器中
  2. Header: 顶部导航条,只能放置Layout
  3. Aside: 侧边栏,只能放置Layout
  4. Body: 主题部分,只能放置Layout
  5. Footer: 底部容器,只能放置Layout

上下布局,导航条和侧边栏为左右关系

布局组件采用flex实现,请注意浏览器兼容性,IE需要10及以上

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
menu 1
sub menu 1
sub menu 2
sub menu 3
sub menu 4
menu 2
menu 3
sub menu 1
sub menu 2
sub menu 3
sub menu 4
menu 4
Home>
Detail
content
侧边栏布局

侧边栏布局,导航条和侧边栏为左右关系,通常需要展开收起侧边栏,给Aside添加collapse属性即可控制侧边栏的展开收起状态。组件会自动给侧边栏下的菜单组件Menu应用相同的collapse属性

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
上下布局固定侧边栏和头部

HeaderAside分别添加fixed属性,即可固定顶部或者侧边栏,组件会自动添加相应样式,无需手动添加样式

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
左右布局固定侧边栏和头部

HeaderAside分别添加fixed属性,即可固定顶部或者侧边栏,组件会自动添加相应样式,无需手动添加样式。另外我们可以通过给Aside添加size属性,来控制侧边栏的宽度,给属性会自动应用到子组件Menu

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)

属性

Header

属性 说明 类型 默认值
fixed 是否固定头部 Boolean false

Aside

属性 说明 类型 默认值
fixed 是否固定侧边栏 Boolean false
size 侧边栏宽度 "large" | "default" | "small" "default"
collapse 是否收起侧边栏 Boolean false