@aliretail/react-materials-components
Version:
50 lines (34 loc) • 3.23 kB
Markdown
title: PageLayout-API
order: 3
category: UI
description: PageLayout 组件描述
screenshot: https://gw.alicdn.com/imgextra/i2/O1CN01yW3hCD1M8CnqeKFlq_!!6000000001389-2-tps-90-90.png
## API
### PageLayout
| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
| ------------------ | ----------------- | ---- | -------------------- | --------- | --------------------------------------------------------------------------------------------------- |
| mode | 模式 | N | string | 'normal' | 'fillInScreen' | 'leftFixed' | 'fixed' | 见下方说明 |
| horizontalDivider | 水平分割线 | N | string | 'space' | 'space': 间距分割； 'line': 线条分割 |
| containerClassName | 内容区域 CSS 类名 | N | string | undefined | |
| children | 布局子组件 | N | Nav,Container,Footer | undefined | 子组件仅限已注册类型 |
| isStrictMode | 是否为严格模式 | N | boolean | true | 严格模式下，子元素必须存在 Container -> Section,外面不可嵌套其他 true： 严格模式，false: 非严格模式 |
| getNonStrictArea | 设置非标准格式下的区域显示 | N | function | (child) => {return '';} | 如果在被hoc包裹的情况下，可使用 getNonStrictArea 设置 footer 区域等来实现固定底部的操作。 |
- mode: fillInScreen, 页面布局最小高度设置为屏幕剩余高度，推荐 在设置了页面背景色的时候开启，防止页面底部留白
- mode: leftFixed, 左侧侧边栏固定，开启时，侧边栏固定不随布局内容滚动。
- mode: fixed, 内容区域撑开，底部 footer 吸底，内容区域滚动。可取代 leftFixed 的用法
- getNonStrictArea: (child) => 'nav' | 'header' | 'content' | 'footer' | 'left' | '';
### PageLayout.Nav
导航区域容器组件，此组件的所有内容会被放置到 PageLayout 的导航区域，一般用于放置面包屑。
### PageLayout.Container
内容区域分隔组件，此组件的所有内容会被放置到 PageLayout 的内容区域。
### PageLayout.Section
| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
| ------ | ---- | ---- | ------ | --------- | ---------------------------- |
| title | 标题 | N | string | undefined | 内容区块的标题，不填写时隐藏 |
内容模块容器组件。包含标题和内容。
### PageLayout.Footer
底部区域容器组件，此组件的所有内容会被放置到 PageLayout 的底部区域，一般用于放置页面全局操作。
### PageLayout.Left
左侧区域容器，页面侧边栏，依据设计规范，固定宽度 280px