Docs
API
  • 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'
      }]
    },{
    ...
    

    tip

    String|Number

    Field tip.

    
    }, {
      label: 'Name',
      tip: 'Name',
      emptyText: 'Name',
      name: 'name'
    }, {
      label: 'SurName',
      tip: '{value}',
      emptyText: 'SurName',
      value: 'Johnson',
      name: 'surname'
    }, {
      label: 'E-mail',
      emptyText: 'E-mail',
      name: 'email',
      tip: function(field, value, label) {
    	return field.label;
      }
    }, {
    

    Sample on JSFiddle

    undefined

    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'
      }]
    },{
    ...
    

    Methods

    disable

    ()

    Disable field.

    
    field.disable();
    

    enable

    ()

    Enable field.

    
    field.enable();
    

    setItems

    (items: Array)

    Set new items for field.

    
    field.setItems([{
      text: 'Button 1',
      pressed: true
    },{
      text: 'Button 2'
    },{
      text: 'Button 3'
    }]);
    

    setValue

    (value: Array|Number|String)

    Set field value.
    Field segbutton sets value in different way than other field types.

    
    // Set value by order index
    },{
      type: 'segbutton',
      multiToggle: true,
      id: 'countries',
      items: [{
    	text: 'USA',
    	value: 'usa'
      },{
    	text: 'Canada',
    	value: 'canada'
      },{
    	text: 'Finland',
    	value: 'finland'
      },{
    	text: 'UK',
    	value: 'uk'
      },{
    	text: 'France',
    	value: 'france'
      }]
    }],
    
    field.setValue(1);
    
    
    // Set value by field value
    },{
      type: 'segbutton',
      multiToggle: true,
      id: 'countries',
      items: [{
    	text: 'USA',
    	value: 'usa'
      },{
    	text: 'Canada',
    	value: 'canada'
      },{
    	text: 'Finland',
    	value: 'finland'
      },{
    	text: 'UK',
    	value: 'uk'
      },{
    	text: 'France',
    	value: 'france'
      }]
    }],
    
    field.setValue('canada');
    
    
    // Set values by field order
    },{
      type: 'segbutton',
      multiToggle: true,
      id: 'countries',
      items: [{
    	text: 'USA',
    	value: 'usa'
      },{
    	text: 'Canada',
    	value: 'canada'
      },{
    	text: 'Finland',
    	value: 'finland'
      },{
    	text: 'UK',
    	value: 'uk'
      },{
    	text: 'France',
    	value: 'france'
      }]
    }],
    
    field.setValue([1, 3]);
    
    
    // Set values by field values
    },{
      type: 'segbutton',
      multiToggle: true,
      id: 'countries',
      items: [{
    	text: 'USA',
    	value: 'usa'
      },{
    	text: 'Canada',
    	value: 'canada'
      },{
    	text: 'Finland',
    	value: 'finland'
      },{
    	text: 'UK',
    	value: 'uk'
      },{
    	text: 'France',
    	value: 'france'
      }]
    }],
    
    field.setValue(['usa', 'canada']);
    

    Sample on JSFiddle

    setWidth

    (value: Number)

    Set new field width.

    
    field.setWidth(400);
    

    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){
          
        }
      }]
    },{