# @rsuite/react-frame

> react frame

Latest version **1.0.1** (published 2019-01-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rsuite/react-frame
pnpm add @rsuite/react-frame
yarn add @rsuite/react-frame
bun add @rsuite/react-frame
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-01-09 |
| First published | 2019-01-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 26.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | hypers |
| Maintainers | simonguo, superman66, hiyangguo, sevenoutman |
| Keywords | rsuite |

## Links

- npm: https://www.npmjs.com/package/@rsuite/react-frame
- Repository: https://github.com/rsuite/react-frame
- Homepage: https://github.com/rsuite/react-frame#readme
- Issues: https://github.com/rsuite/react-frame/issues
- npm.io page: https://npm.io/package/@rsuite/react-frame

## Dependencies (2)

- [recompose](https://npm.io/package/recompose.md) ^0.28.2
- [classnames](https://npm.io/package/classnames.md) ^2.2.6

## Recent versions

- 1.0.1 (latest) — 2019-01-09

## README

# React Frame

基于 Rsuite 封装的 Frame 结构。

`<Frame>` 包含：

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

## Demo


## 用法

**安装**

```
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-frame';
```

### Demo

Frame 结构如下：
![](./docs/screenshoot/frame.jpg)

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

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

## 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
}
```

`activeName` 和 `activeCode` 取其一即可。

其中 `<Frame.Nav>` 的大部分 props 都来自于 `rsuite-grid-sidebar`，具体的说明及用法可以看 rsuite-grid-sidebar 的[文档](https://git.hypers.com/fe/rsuite-grid-sidebar)

## `<Frame.Content>`

| Name      | Type       | Description |
| --------- | ---------- | ----------- |
| children  | React.Node |             |
| className | string     |             |
| style     | Object     |             |

---
_Source: https://npm.io/package/@rsuite/react-frame · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._