https://github.com/rsuite/react-frame
基于 Rsuite 封装的 Frame 结构。
https://github.com/rsuite/react-frame
Last synced: 5 months ago
JSON representation
基于 Rsuite 封装的 Frame 结构。
- Host: GitHub
- URL: https://github.com/rsuite/react-frame
- Owner: rsuite
- Created: 2019-01-09T08:02:43.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-04-10T03:56:35.000Z (almost 7 years ago)
- Last Synced: 2024-10-30T00:00:12.565Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://rsuite.github.io/react-frame/
- Size: 831 KB
- Stars: 7
- Watchers: 4
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# React Frame
基于 Rsuite 封装的 Frame 结构。
`` 包含：
- `` 显示侧边栏。包括产品列表、左侧菜单栏。其中菜单栏需要由使用者自行传入
- `` Content 内容区域
## Demo
[Demo](https://rsuite.github.io/react-frame/)
## 用法
**安装**
```
yarn add @rsuite/react-frame
// 或
npm install @rsuite/react-frame
```
**引入 less**
```less
@import '~@rsuite/rsuite-frame/lib/styles/less/index.less';
```
**在代码中引入**
```js
import Frame from '@rsuite/react-frame';
```
### Demo
Frame 结构如下：
其中 Frame 固定的是 1、2 部分。使用者可以自行传入菜单栏和 content 内容。
```js
// 这里是菜单栏的代码
content
```
具体 Demo code 可以参考 [https://github.com/rsuite/react-frame/blob/master/docs/index.js](https://github.com/rsuite/react-frame/blob/master/docs/index.js)。
## Props
## ``
| Name | Type | Description |
| --------- | ---------- | ----------- |
| children | React.Node | |
| className | string | |
| style | Object | |
## ``
| Name | Type | Description |
| ----------------- | ---------- | ---------------------------- |
| brand | React.Node | 侧边栏收起状态下显示的 Icon |
| children | React.Node | |
| className | string | |
| expand | boolean | (受控)侧边栏的是否展开的状态 |
| onExpand | () => void | 侧边栏展开关闭回调 |
| onRenderBottomNav | ()=> void | 底部侧边栏渲染方法 |
| renderTitle | () => any | 标题 |
| showMenu | boolean | 是否隐藏菜单 |
| style | Object | |
## ``
| Name | Type | Description |
| --------- | ---------- | ----------- |
| children | React.Node | |
| className | string | |
| style | Object | |