简介
@canner/page-wrapper 是一个 React 组件库，用于帮助开发人员快速构建包含头部，侧边栏，内容以及底部的网页布局。它可以非常方便的处理这个布局，并且可以适应不同设备大小和方向。
安装和使用
- 安装
使用 npm 安装：
npm install --save @canner/page-wrapper
或者使用 yarn 安装：
yarn add @canner/page-wrapper
- 使用
引入组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- -----------------------
----- --- - -- -- -
------ -
------------ -----------
-------------- ----------------
-------------- ---------------
---------- --------------
-------------- ----------------
--------------
--
-参数
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| mode | string | 'default' | 网页布局模式，可选值为 'default' 或 'app' |
| header | React.ReactNode | 头部内容 | |
| sidebar | React.ReactNode | 侧边栏内容 | |
| main | React.ReactNode | 主要内容 | |
| footer | React.ReactNode | 底部内容 | |
| headerProps | object | {} | 头部的属性 |
| sidebarProps | object | {width: 256, collapsible: true} | 侧边栏的属性 |
| mainProps | object | {} | 主要内容的属性 |
| footerProps | object | {} | 底部的属性 |
mode 参数有两种取值：'default' 和 'app'，'default' 表示默认布局（含有侧边栏），'app' 表示应用布局（没有侧边栏）。
详细参数解释如下：
- headerProps：
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| height | number | 72 | 头部高度，单位为像素 |
| style | object | {} | 头部样式 |
| beforeIcon | React.ReactNode | 头部左侧显示的图标 | |
| afterIcon | React.ReactNode | 头部右侧显示的图标 |
- sidebarProps：
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| width | number | 256 | 侧边栏宽度 |
| collapsible | boolean | true | 是否可以折叠 |
| style | object | {} | 侧边栏样式 |
| icon | React.ReactNode | <menuicon> | 折叠按钮左侧显示的图标，在没有可收缩的侧边栏的情况下将不会显示 |
| title | string | React.ReactNode | 'Canner' | 侧边栏标题 |
- mainProps：
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| style | object | {} | 主要内容 |
- footerProps：
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| style | object | {} | 底部 |
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- -----------------------
----- --- - -- -- -
------ -
------------
--------------
--------
---- ------------------ ----------
------- -------------------------------
------
-
---------
------
--------- -------
--------------
---------- --
---------------
------------- --------------- --
-----------
--------- -------
--------------
----------- --
---------------
------------- ---------------- --
-----------
-------
-
------
---------- --------------
---- -------
----------- ------------ -------------- -------------
---------
-------------
------ --
------
------------
-
--------
----------- --------------- --------------------- ---------------
--- --
---- ---------------------
-----
-------------
-
--
--
-
------ ------- ----结语
通过使用 @canner/page-wrapper，我们可以非常方便的构建一个包含头部，侧边栏，主要内容以及底部的网页布局。同时，组件提供了非常灵活的参数配置，可以适应不同设备的大小和方向。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/canner-page-wrapper