PageLayout
issue

布局组件

何时使用

整个页面布局时使用

如何使用

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-layoutRow 的封装

LeftContent 和 RightContent 为 bee-layoutCol 的封装,所以继承了 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 改为大写。