SelectorBar

SelectorBar

SelectorBar 为滑竿选择控件，一共有 3 种类型。

SlideBar

SlideBar 为顺滑型滑竿控件，数值为整型，在起始和终点值之间连续变化：

<slidebar value={myStore.value} step="10" on-change={ linkEvent(this, xxx) }>
  <start value="5">Start</start>
  <end value="500">End</end>
</slidebar>

const { SlideBar } from 'mesh-envoy-tag'

const bar = (
	<SlideBar 
		value={this.state.value} 
		step={10} 
		onChange={linkEvent(change, this)}>
		<SlideBar.Start value={5}>5</SlideBar.Start>
		<SlideBar.End value={500}>500</SlideBar.End>
	</SlideBar>
)

名称	作用	必须	可否更改
slidebar.value	slidebar 对应值	true	true
slidebar.step	步进距离，点击 + - 按钮时的数值变化单位	true	false
start.text	起始点标题	true	false
start.value	起始值	true	false
end.text	结束点标题	true	false
end.value	结束值	true	false

事件	触发条件	附带参数
slidebar.change	用户的滑动滑杆时将会触发	滑杆的值

DegreeBar

DegreeBar 为分级滑动滑竿控件，数值为整型，在起始点跟终点值之间定距离变化：

<degreebar value={myStore.value} step="10" on-change={ linkEvent(this, xxx) }>
	<start value="10">10</start>
	<mid>60</mid>
	<end value="110">110</end>
</degreebar>

const { DegreeBar } from 'mesh-envoy-tag'

const bar = (
	<DegreeBar 
		value={this.state.value} 
		step={10} 
		onChange={linkEvent(change, this)}>
		<DegreeBar.Start value={5}>5</DegreeBar.Start>
		<DegreeBar.Mid>255</DegreeBar.Mid>
		<DegreeBar.End value={500}>500</DegreeBar.End>
	</DegreeBar>
)

名称	作用	必须	可否更改
degreebar.value	degreebar 对应值	true	true
degreebar.step	步进距离，点击 + - 按钮时的数值变化单位	true	false
start.text	起始点标题	true	false
start.value	起始值	true	false
mid.text	中点标题	false	false
end.text	结束点标题	true	false
end.value	结束值	true	false

事件	触发条件	附带参数
degreebar.change	用户的滑动滑竿时将会被触发	滑杆的值