segbutton

Segmented Button field type

Example


items: [{
  label: 'Education',
  type: 'segbutton',
  name: 'education',
  multiToggle: true,
  items: [{
    text: 'Bachelor'
  },{
    text: 'Master',
    pressed: true
  },{
    text: 'PhD',
    pressed: true
  },{
    text: 'Doctor'
  }]
},{
...

Properties

allowToggle

Boolean

Enable toggle.


...
items: [{
  label: 'Military',
  type: 'segbutton',
  name: 'military',
  items: [{
    text: 'Yes',
    value: 'yes'
  },{
    text: 'No',
    pressed: true,
    value: 'no'
  }]
},{
...
true

items

Array

Buttons of segbutton field.


...
items: [{
  label: 'Military',
  type: 'segbutton',
  name: 'military',
  items: [{
    text: 'Yes',
    value: 'yes'
  },{
    text: 'No',
    pressed: true,
    value: 'no'
  }]
},{
...

label

String

Text of field.


...
items: [{
  label: 'Military',
  type: 'segbutton',
  name: 'military',
  items: [{
    text: 'Yes',
    value: 'yes'
  },{
    text: 'No',
    pressed: true,
    value: 'no'
  }]
},{
...

labelAlign

String

Align of label.

Values: right, left, top.


...
items: [{
  label: 'Military',
  type: 'segbutton',
  name: 'military',
  labelAlign: 'right',
  items: [{
    text: 'Yes',
    value: 'yes'
  },{
    text: 'No',
    pressed: true,
    value: 'no'
  }]
},{
...
left

multiToggle

Boolean

Enable multi toggle of segbutton field.


...
items: [{
  label: 'Education',
  type: 'segbutton',
  name: 'education',
  multiToggle: true,
  items: [{
    text: 'Bachelor'
  },{
    text: 'Master',
    pressed: true
  },{
    text: 'PhD',
    pressed: true
  },{
    text: 'Doctor'
  }]
},{
...
false

name

String

Name of field over which it is possible to get value of field.


...
items: [{
  label: 'Military',
  type: 'segbutton',
  name: 'military',
  labelAlign: 'right',
  items: [{
    text: 'Yes',
    value: 'yes'
  },{
    text: 'No',
    pressed: true,
    value: 'no'
  }]
},{
...

type

String

Type of field (value - segbutton).


...
items: [{
  label: 'Military',
  type: 'segbutton',
  name: 'military',
  labelAlign: 'right',
  items: [{
    text: 'Yes',
    value: 'yes'
  },{
    text: 'No',
    pressed: true,
    value: 'no'
  }]
},{
...

Events

toggle

(segbutton, button, value, values)

Fires when any child button's pressed state has changed.

  • segbutton - link on self.
  • button - .
    button that changed pressed value.
  • value - pressed value.
  • values - values(pressed/not pressed) of all buttons.

tbar: [{
  type: 'segbutton',
  id: 'housesseg',
  multiToggle: true,
  items: [{
    text: '1'
  },{
    text: '2'
  },{
    text: '3'
  }],
  events: [{
    toggle: function(segbutton, button, value, values){
      
    }
  }]
},{