Segmented Control

Segmented controls allow users to make a single selection from a set of options. Like buttons, segments can contain text, icons or both.

Usage

val items = arrayListOf(
    XelaSegmentedControlItem(0, "Day"),
    XelaSegmentedControlItem(1, "Week"),
    XelaSegmentedControlItem(2, "Month"),
    XelaSegmentedControlItem(3, "Year"),

)

XelaSegmentedControl(
    items = items,
    selectedItemId = 0,
    onSelectedItem = {},
    primaryBackground = XelaColor.Yellow3,
    primaryFontColor = XelaColor.Gray2,
    secondaryBackground = XelaColor.Gray12,
    autoResize = false
)

Properties XelaSegmentedControll

Name	Type	Default Value	Required	Description
items	List <XelaSegmentedControllItem>	-	YES	Segmented Controll items
selectedItemId	Int	-	YES	Selected item ID
onSelectedItem	(XelaSegmentedControlItem) -> Unit	-	YES	On selected Item action
primaryBackground	Color	XelaColor.Blue6	NO	Primary - accent - selected background color
secondaryBackground	Color	XelaColor.Gray12	NO	Secondary background color
primaryFontColor	Color	Color.White	NO	Primary - accent - selected font color
secondaryFontColor	Color	XelaColor.Gray2	NO	Secondary font color
autoResize	Boolean	false	NO	Auto resize items width

Properties XelaSegmentedControllItem

Name	Type	Default Value	Required	Description
id	Int	-	YES	Item ID, should begin from 0
label	String		NO	Item label text
icon	Int?	null	NO	Item icon name from Drawable