1.4.4 • Published 2 years ago
@monsterooo/layout v1.4.4
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 |
1.4.4
2 years ago