title: Layout 布局 order: 1 nav: title: 组件 path: /components order: 2 group: title: 布局 order: 2

Layout 布局

协助进行页面级整体布局。

使用

提供全局属性配置的能力。

import Layout from '@monsterooo/layout';

<Layout />;

代码演示

基本用法

参数

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | theme | 主题 | light/dark | light | | layout | 布局方式 | sidemenu | sidemenu | | fixedHeader | 固定头部 | boolean | true | | fixSiderbar | 固定菜单 | boolean | true | | defaultCollapsed | 默认收起菜单 | boolean | false | | loading | 全局 loading | boolean | false | | user | 用户信息 | userOptions | null | | nav | 导航信息 | navOption | null | | pathname | 用户信息 | history pathname | null | | location | 路径变化 | history location | null | | header | header 配置 | headerOptions | null | | siteName | 系统名称 | string | null | | logoPath | logo 路径 | string | null | | renderLogo | 自定义 logo | () => ReactNode | null | | renderNav | 自定义导航 | () => ReactNode | null | | renderTip | 自定义系统提示 | () => ReactNode | null | | size | layout 布局大小 | small \| middle size 尺寸说明 | middle |

user Options

| 参数 | 说明 | 类型 | 默认值 | | -------- | ------ | -------- | ------ | | username | 用户名 | string | null |

header Options

| 参数 | 说明 | 类型 | 默认值 | | ----------- | ---------------------- | ----------------- | ------ | | renderRight | 自定义 header 右侧内容 | () => ReactNode | null |

layoutSize Options

| 参数 | 说明 | 类型 | small | middle | | ------------------ | ------------- | ------ | ----- | ------ | | headerHeight | header 高度 | number | 50 | 64 | | menuWidth | menu 宽度 | number | 200 | 256 | | menuCollapsedWidth | menu 收起宽度 | number | 50 | 80 |