# rs-mindtree

> a react component about leaf tree

Latest version **1.10.4** (published 2021-01-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install rs-mindtree
pnpm add rs-mindtree
yarn add rs-mindtree
bun add rs-mindtree
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.10.4 |
| Published | 2021-01-20 |
| First published | 2021-01-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 14 |
| Unpacked size | 202.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | feasin |
| Maintainers | sunyufen |

## Links

- npm: https://www.npmjs.com/package/rs-mindtree
- Repository: https://github.com/Fea-Sin/cr-mindTree
- Homepage: https://github.com/Fea-Sin/cr-mindTree#readme
- Issues: https://github.com/Fea-Sin/cr-mindTree/issues
- npm.io page: https://npm.io/package/rs-mindtree

## Dependencies (14)

- [antd](https://npm.io/package/antd.md) ^4.10.3
- [rc-util](https://npm.io/package/rc-util.md) ^4.1.0
- [classnames](https://npm.io/package/classnames.md) 2.x
- [ismobilejs](https://npm.io/package/ismobilejs.md) ^0.5.1
- [mini-store](https://npm.io/package/mini-store.md) ^2.0.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.6
- [rc-animate](https://npm.io/package/rc-animate.md) 2.x
- [rc-trigger](https://npm.io/package/rc-trigger.md) ^2.3.0
- [babel-runtime](https://npm.io/package/babel-runtime.md) 6.x
- [velocity-animate](https://npm.io/package/velocity-animate.md) ^1.5.2
- [dom-scroll-into-view](https://npm.io/package/dom-scroll-into-view.md) 1.x
- [mutationobserver-shim](https://npm.io/package/mutationobserver-shim.md) ^0.3.2
- [@ant-design/compatible](https://npm.io/package/@ant-design/compatible.md) ^1.0.8
- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.0

## Recent versions

- 1.10.4 (latest) — 2021-01-20

## README

# cr-mindTree

react component

## Example
 <img src="./github/example1.png" alt="example" />

## Usage

```jsx
cnpm install --save cr-mindtree
```

```js
import MindTree from 'cr-mindtree'
import 'cr-mindtree/assets/index.css'
// 注意在使用的时候不能忘记引入css

<MindTree title='分支机构' bgColor='#e4effc'
  tree={[{
    name: 'leaf-on0',
    value: '001',
    accessory: '75%',
  }, {
    name: 'leaf-two',
    value: '002',
    accessory: '25%',
  }]}
  mode='bottomCenter'
/>
```

## 注意
如果使用了cssModule，作为样式的使用方式，在引入css时应特别注意
以And Design Pro使用为例，在对应的页面less中引入css。注意包名前面的波浪线
```less
@import '~cr-mindtree/assets/index.css';
```
## API
name | type | description
-----|------|------------
title|string|组件标题
tree|array|传入组件树数据，类似[{name: 'leaf-one', value: '001'}, {name: 'leaf-two', value: '002'}]
bgColor|string|组件背景颜色
mode   |string|组件展开的方式（'bottomCenter', 'topRight', 'topLeft', 'bottomLeft', 'bottomRight'）
treeChange|func|组件展开收起 function(val) {}; 组件展开val为true,收起为false
leafClick|func|点击组件叶子事件 function(event, val) {}; val为叶子数据
treeBoxWidth|number|组件树叶子部分的宽度，一般不需要设置，默认值为300
className|string|为组建增加className
hoverBgColor|string|组件枝叶及标题hover背景颜色
## Development

```
cnpm install
npm start
```

## Example

http://localhost:8019/examples/testOne.html

## Test
```js
npm test
```


## License

cr-mindTree is released under the MIT license.

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