HandlerList

HandlerList

包含 handlerlist 的页面为 handler 页面，默认包含图传控件。 而 handlerlist 为 Handler 页面中的操作选项列表。列表的 cell 包含两种样式，“Switch(开关)” 与 “Detail(详细)”。当 item 中包含 switch 标签，则为 switch cell，只包含 string 或者变量绑定，则为 detail cell：

<handlerlist>
  <switchitem title="Gimbal:" off="M" on="AUTO" enable={myStore.switchEnable} value={myStore.switchValue} on-change={xxx}>
  </switchitem>
  <detailitem title="ISO:" on-click={xxx}>
    {myStore.iso}
    <menuitem style="default" on-click={xxx}>Rename</menuitem>
    <menuitem style="delete" on-click={xxx}>Delete</menuitem>
  </detailitem>
  <detailitem title="Shutter:" hidden={myStore.shutterHidden} on-click={xxx}>
    {myStore.shutter}
  </detailitem>
  <detailitem title="EV:">
    {myStore.ev}
  </detailitem>
</handlerlist>

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

const list = (
  <HandlerList size="stretch" alignment="bottom">
    <HandlerList.SwitchItem 
      title="Gimbal:" 
      off="M" 
      on="AUTO" 
      value={this.state.switchValue} 
      onChange={ linkEvent(foo, this) } />
    <HandlerList.DetailItem 
      title="ISO:" 
      onClick={ linkEvent(bar, this) }>
      {this.state.value}
    </HandlerList.DetailItem>
    <HandlerList.DetailItem 
      title="Shutter:" 
      hidden={this.state.switchValue} 
      onClick={ linkEvent(bar, this) }>
      {this.state.value}
    </HandlerList.DetailItem>
    <HandlerList.DetailItem title="EV:" onClick={() => {}}>
      {this.state.value}
    </HandlerList.DetailItem>
    <HandlerList.StepperItem 
      title="Step"
      value={this.state.list[this.state.index]}
      index={this.state.index}
      onChange={ linkEvent(change, this)} />
  </HandlerList>
)

SwitchItem

名称	作用	必须	可否更改
title	选项的标题	true	false
off	开关的左 title	true	false
on	开关的右 title	true	false
enable	开关激活状态	false	true
value	开关的值	true	true

事件	触发条件	附带参数
change	开关的值改变	开关值

DetailItem

名称	作用	必须	可否更改
title	选项的标题	true	false
text	选项的内容	true	true
hidden	控制 item 的隐藏或者现实	false	true

事件	触发条件	附带参数
click	点击选项	无

此外，DetailItem 内可指定 menuitem，当用户左滑对应的条目时，显露出相应的项目。

MenuItem

名称	作用	必须	可否更改
text	选项的内容	true	false
style	选项的样式	true	false

事件	触发条件	附带参数
click	点击选项	无

StepperItem

名称	作用	必须	可否更改
title	选项的标题	true	false
value	当前步进值	true	true
index	值索引	true	true
hidden	控制 item 的隐藏或者现实	false	true

事件	触发条件	附带参数
change	步进值改变	步进值