Segmented Control

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

segmented control

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