object-knob
v1.1.9
Published
可配置的对象属性面板
Downloads
14
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
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