# nsky-legend 图例组件
---

Nsky Common Component

## Screenshots


![](https://git.xiaojukeji.com/enigma/nsky-design/uploads/9edc858117f31807dafd90e0aa71a8c1/WechatIMG2.jpeg)

![](https://git.xiaojukeji.com/enigma/nsky-design/uploads/5fa06ec1cbb493ebc0c5b4f65a08d803/WechatIMG1.jpeg)

## install

```
dnpm install nsky-legend --save-dev
```

## Usage

```js
import NskyLegend from 'nsky-legend'
import React from 'react'
import ReactDOM from 'react-dom'

import 'nsky-legend/dist/index.css'

ReactDOM.render(<NskyLegend />, container)

```
## API

### props

name | type | default |  description |
-----|------|---------|--------------|
legends    | Array    | []       |  图例的数据来源，内部对象包含color/des/title属性        |
direction    | String    | 'horizontal'       |  展示形态，可分横向和纵向        |
isShow    | Boolean    | false       |  是否显示，外部控制nsky-legend的显示隐藏        |
position    | Object    | {}       |  控制组件位置, 内部对象包含left/top/right/bottom        |
className    | String    | null      |  增加组件的类名        |


legends 配置示例

```javascript
[{
    color: '#7ED321',
    des: '已发布',
    title: '可选'
}, {
    color: '#9B9B9B',
    des: '未发布',
    title: '可选'
}]
```

## Development

```
npm install
npm run example
```