# object-knob

> 可配置的对象属性面板

Latest version **1.1.9** (published 2020-02-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install object-knob
pnpm add object-knob
yarn add object-knob
bun add object-knob
```

## 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.1.9 |
| Published | 2020-02-10 |
| First published | 2020-02-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 446.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | liuhan |
| Maintainers | liuhan |

## Links

- npm: https://www.npmjs.com/package/object-knob
- npm.io page: https://npm.io/package/object-knob

## Dependencies (4)

- [bulma](https://npm.io/package/bulma.md) ^0.8.0
- [react](https://npm.io/package/react.md) ^16.12.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.12.0
- [react-color](https://npm.io/package/react-color.md) ^2.18.0

## Recent versions

- 1.1.9 (latest) — 2020-02-10
- 1.1.8 — 2020-02-10
- 1.1.7 — 2020-02-10
- 1.1.6 — 2020-02-10
- 1.1.5 — 2020-02-06

## README

# 可配置自动图元属性面板

## StoryBook

http://10.10.247.1:4877/api/packages/@gw/wind-prop-panel/1.1.5/storybook-static/index.html

## 使用
```
 <PropPanel input={action('prop-change')} switched={action('toggle-change')} tabs={tabs} object={props} styles={ panelStyle } />
```
### 参数

***tabs***

```yaml
ConfigTab:
    type: "object"
    description: "面板的每个配置tab页"
    properties:
      label:
        type: "string"
        description: "Tab页标签名称"
      items:
        type: "array"
        description: "配置项列表，具体配置见ConfigItem"
        items:
          $ref: "#/definitions/ConfigItem"
ConfigItem:
    type: "object"
    description: "每个配置项信息"
    properties:
      label:
        type: "string"
        description: "配置项标题"
      bind:
        type: "string"
        description: "绑定到对象的属性路径，支持多层指定。具体见 https://github.com/jonschlinkert/get-value"
      type:
        type: "string"
        description: "配置项类型，可以为js基础类型及扩展类型"
        enum:
          - 'string'
          - 'number'
          - 'boolean'
          - 'array'
          - 'color'  
        default: String
      items:
        type: "array"
        description: "type=array 并且 arrayType=object情况下，具体指定object类型下的成员绑定"
        items:
          $ref: "#/definitions/ConfigItem"
      header:
        type: "string"
        description: "type=array 并且 arrayType=object情况下, 具体指定每个数组成员的标识"
      arrayType:
        type: "string"
        description: "type=array情况下，指定array成员的数据类型"
        enum:
          - 'string'
          - 'number'
          - 'boolean'
          - 'object'
          - 'color'  
        default: 'object'
      show:
        type: "string"
        description: "按照指定属性路径的对象值决定本配置项是否显示"
```

### 示例 (Story)
```
import React from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import PropPanel from '../src/PropPanel.jsx'

const tabs = [{
  label: '内容样式',
  items: [{
    label: '标题',
    bind: 'title',
    type: String
  }, {
    label: '单位',
    bind: 'unit',
    type: String
  }, {
    label: '计算比例',
    bind: 'indicator.percent',
    type: Boolean
  }, {
    label: '比例',
    bind: 'indicator.percentValue',
    type: Number,
    show: 'indicator.percent'
  }, {
    label: '颜色',
    bind: 'backColor',
    type: 'color'
  },{
    label: '系列',
    bind: 'series',
    type: Array,
    header: 'title',
    items: [{
      label: '系列标题',
      bind: 'title',
      type: String
    }, {
      label: '颜色',
      bind: 'backColor',
      type: 'color'
    },{
      label: '系列值',
      bind: 'value',
      type: Number
    },]
  }, {
    label: '字符串数组',
    bind: 'baseValues',
    type: Array,
    arrayType: String
  }]
}, {
  label: '数据绑定',
  items: [{
    label: '当前值',
    bind: 'indicator.value',
    type: Number
  }, {
    label: '总值',
    bind: 'indicator.total',
    type: Number
  }]
}]

storiesOf('PropPanel', module).add('to Storybook', () => {
  let props = {
    'title': '累计天数',
    'unit': '天',
    'backColor': '#343',
    'indicator': {
      'value': 22,
      'total': 31,
      'percent': false
    },
    baseValues: ['12', '11', '234'],
    'series': [{
      'title': '系列1',
      'backColor': '#13cffe',
      'value': 121
    }, {
      'title': '系列2',
      'backColor': '#61f9b8',
      'value': 63
    }],
    'ringStyle': {
      'inner': {
        'fillStyle': 'transparent',
        'strokeStyle': 'rgba(19,92,139,0.3)',
        'lineWidth': 4
      },
      'outer': {
        'shadowBlur': '10',
        'shadowColor': '#13cffe',
        'fillStyle': 'transparent',
        'strokeStyle': '#61f9b8',
        'lineWidth': 6,
        'lineCap': 'round'
      },
      'marker': {
        'fillStyle': 'white',
        'shadowBlur': '10',
        'shadowColor': 'white',
        'radius': 8.5
      }
    }
  }

  const panelStyle = {
    width: 320,
    height: 640
  }
  return <PropPanel input={action('prop-change')} tabs={tabs} props={props} size={ panelStyle } />
})

```



## 测试

```
npm run storybook
```

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