Segmented Button, UI Controls Webix Docs

Trang chủ » Html Segmented Button » Segmented Button, UI Controls Webix Docs

Có thể bạn quan tâm

StartUI Controls Segmented Button

API Reference

  • Methods, properties and events
  • Shared functionality

Overview

Segmented is an integral button with as many segments as you like. Can be used for switching between MultiView cells.

Initialization

{view:"segmented", multiview:true, value:1, options:[ { id:"1", value:"Section A" }, // the initially selected segment { id:"2", value:"Section B" }, { id:"3", value:"Section C" }] } //short form for options array { view:"segmented", options:["Section A", "Section B", "Section C"]}

Related sample: Holistic Panel with Multiple Buttons ('segmented')

Main properties

  • multiview (boolean) - connects the control to the MultiView cells, enables switching between these cells;
  • options (array, object) - defines the buttons (segments) within the control. Details;
  • value (string, number)
    • within options array it sets titles for button segments;
    • within Segmented constructor it defines the initially selected item for the control;
  • label (string) - text label of a control. It can be customized by:
    • labelAlign (string) - label alignment towards its container. Possible values are "left" and "right". In any way, it's placed left to the control;
    • labelWidth (number) - width of the label container.

Showing and Hiding Options

Segmented Button provides the possibility to hide and show segments with the help of the corresponding methods: showOption and hideOption.

You need to pass the id of the view that should be hidden as a parameter.

// hiding view $$("segmented").hideOption("viewId"); // showing view $$("segmented").showOption("viewId");

Working with Segmented Button

Adding and Deleting Segments (Options) on the Go

Related Articles

  • Segmented Button CSS Image Map
Back to top Join Our Forum We've retired comments here. Visit our forum for faster technical support, connect with other developers, and share your feedback there. Go to Forum

Từ khóa » Html Segmented Button