PageLayout
布局组件
何时使用
整个页面布局时使用
如何使用
import PageLayout from 'bee-page-layout';
import 'bee-page-layout/build/PageLayout.css';
const Header = PageLayout.Header;
const SearchArea = PageLayout.SearchArea;
const Content = PageLayout.Content;
const TableContent = PageLayout.TableContent;
const LeftContent = PageLayout.LeftContent;
const RightContent = PageLayout.RightContent;
能力特性
API
PageLayout
| 参数 |
说明 |
类型 |
默认值 |
| className |
类名 |
string |
bee-page-layout |
| 参数 |
说明 |
类型 |
默认值 |
| className |
类名 |
string |
header |
SearchArea
| 参数 |
说明 |
类型 |
默认值 |
| className |
类名 |
string |
search-area |
Content
| 参数 |
说明 |
类型 |
默认值 |
| className |
类名 |
string |
content |
TableContent
| 参数 |
说明 |
类型 |
默认值 |
| className |
类名 |
string |
table-container |
LeftContent
| 参数 |
说明 |
类型 |
默认值 |
| className |
类名 |
string |
left-content |
| xs |
移动设备显示列数(<768px) |
number |
- |
| sm |
小屏幕桌面设备显示列数(≥768px) |
number |
- |
| md |
中等屏幕设备显示列数(≥992px) |
number |
- |
| lg |
大屏幕设备显示列数(≥1200px) |
number |
- |
| xsPull |
移动屏幕设备到右边距列数 |
number |
- |
| smPull |
小屏幕设备到右边距列数 |
number |
- |
| mdPull |
中等屏幕设备到右边距列数 |
number |
- |
| lgPull |
大屏幕设备到右边距列数 |
number |
- |
| xsPush |
移动屏幕设备到左边距列数 |
number |
- |
| smPush |
小屏幕设备到左边距列数 |
number |
- |
| mdPush |
中等屏幕设备到左边距列数 |
number |
- |
| lgPush |
大屏幕设备到左边距列数 |
number |
- |
| xsOffset |
移动设备偏移列数 |
number |
- |
| smOffset |
小屏幕设备偏移列数 |
number |
- |
| mdOffset |
中等屏幕设备偏移列数 |
number |
- |
| lgOffset |
大屏幕设备偏移列数 |
number |
- |
RightContent
| 参数 |
说明 |
类型 |
默认值 |
| className |
类名 |
string |
right-content |
| xs |
移动设备显示列数(<768px) |
number |
- |
| sm |
小屏幕桌面设备显示列数(≥768px) |
number |
- |
| md |
中等屏幕设备显示列数(≥992px) |
number |
- |
| lg |
大屏幕设备显示列数(≥1200px) |
number |
- |
| xsPull |
移动屏幕设备到右边距列数 |
number |
- |
| smPull |
小屏幕设备到右边距列数 |
number |
- |
| mdPull |
中等屏幕设备到右边距列数 |
number |
- |
| lgPull |
大屏幕设备到右边距列数 |
number |
- |
| xsPush |
移动屏幕设备到左边距列数 |
number |
- |
| smPush |
小屏幕设备到左边距列数 |
number |
- |
| mdPush |
中等屏幕设备到左边距列数 |
number |
- |
| lgPush |
大屏幕设备到左边距列数 |
number |
- |
| xsOffset |
移动设备偏移列数 |
number |
- |
| smOffset |
小屏幕设备偏移列数 |
number |
- |
| mdOffset |
中等屏幕设备偏移列数 |
number |
- |
| lgOffset |
大屏幕设备偏移列数 |
number |
- |
注意事项
Content 为 bee-layout 中 Row 的封装
LeftContent 和 RightContent 为 bee-layout 中 Col 的封装，所以继承了 Col 的所有属性
更新日志
-
v1.0.0
2019-07-11
(
release地址
)
- bee-page-layout @1.0.0
- [Feature]基于 ac-pagelayout 组件重构。
-
v1.0.1
2019-07-11
(
release地址
)
- bee-page-layout @1.0.1
- [Fixbug]入口文件中引用的 “Pagelayout” 的 l 改为大写。
北京市海淀区北清路68号用友产业园
guoyff@yonyou.com