基于 Rsuite 封装的 Frame 结构。
Clone or download
Latest commit 67d7983 Jan 9, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github initial commit Jan 9, 2019
__mocks__ initial commit Jan 9, 2019
docs docs: update docs Jan 9, 2019
src initial commit Jan 9, 2019
styles/less initial commit Jan 9, 2019
.babelrc initial commit Jan 9, 2019
.editorconfig initial commit Jan 9, 2019
.eslintrc.js initial commit Jan 9, 2019
.flowconfig initial commit Jan 9, 2019
.gitignore initial commit Jan 9, 2019
.prettierrc initial commit Jan 9, 2019
CHANGELOG.md initial commit Jan 9, 2019
README.md docs: update docs Jan 9, 2019
package.json docs: update docs Jan 9, 2019
webpack.config.js initial commit Jan 9, 2019
yarn.lock initial commit Jan 9, 2019

README.md

React Frame

基于 Rsuite 封装的 Frame 结构。

<Frame> 包含:

  • <Frame.Nav> 显示侧边栏。包括产品列表、左侧菜单栏。其中菜单栏需要由使用者自行传入
  • <Frame.Content> Content 内容区域

Demo

Demo

用法

安装

yarn add @rsuite/react-frame

// 或
npm install @rsuite/react-frame

引入 less

@import '~@rsuite/rsuite-frame/lib/styles/less/index.less';

在代码中引入

import Frame from '@rsuite/rsuite-frame';

Demo

Frame 结构如下:

其中 Frame 固定的是 1、2 部分。使用者可以自行传入菜单栏和 content 内容。

<Frame>
  <Frame.Nav
    logo={this.getLogo()}
    iconName="DMP-color"
    expand={expand}
    activeName="Insight"
  >
    // 这里是菜单栏的代码
  </Frame.Nav>
  <Frame.Content>content</Frame.Content>
</Frame>

具体 Demo code 可以参考 https://github.com/rsuite/react-frame/blob/master/docs/index.js

Props

<Frame>

Name Type Description
children React.Node
className string
style Object

<Frame.Nav>

Name Type Description
brand React.Node 侧边栏收起状态下显示的 Icon
children React.Node
className string
expand boolean (受控)侧边栏的是否展开的状态
onExpand () => void 侧边栏展开关闭回调
onRenderBottomNav ()=> void 底部侧边栏渲染方法
renderTitle () => any 标题
showMenu boolean 是否隐藏菜单
style Object

AppType:

type AppType = {
  name: string,
  code?: string,
  url: string
}

activeNameactiveCode 取其一即可。

其中 <Frame.Nav> 的大部分 props 都来自于 rsuite-grid-sidebar,具体的说明及用法可以看 rsuite-grid-sidebar 的文档

<Frame.Content>

Name Type Description
children React.Node
className string
style Object