SegmentedControl
Allow users to switch between two or more visualisation modes without changing content. They're a great way to add some customisation to an experience.
Parameters
The type of the key used to uniquely identify each item.
A list of SegmentedControlItem.Text that can only contain text.
The key of the selected item.
The modifier to apply to the layout.
The style of the segmented control.
The size of the segmented control.
Whether the segmented control is enabled or disabled.
The callback that is called when an item is selected.
See also
Samples
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.SegmentedControl
import net.ikea.skapa.ui.components.SegmentedControlItem
import net.ikea.skapa.ui.components.SegmentedControlSize
import net.ikea.skapa.ui.components.SegmentedControlStyle
fun main() {
//sampleStart
SkapaTheme2(isSystemInDarkTheme()) {
// Selected state
var selectedLabel by remember { mutableStateOf("a") }
// List of items of text type
val itemsLabel = listOf(
SegmentedControlItem.Text("a", "Label"),
SegmentedControlItem.Text("b", "Label"),
SegmentedControlItem.Text("c", "Label")
)
SegmentedControl(
textItems = itemsLabel, // Only text items
style = SegmentedControlStyle.Regular,
size = SegmentedControlSize.Text.Small, // Specific sizing for text items
selectedKey = selectedLabel, // Set selected index
enabled = true, // Entire component is enabled or disabled
onSelect = {
// Update the selected item when clicked
selectedLabel = it
}
)
}
//sampleEnd
}Allow users to switch between two or more visualisation modes without changing content. They're a great way to add some customisation to an experience.
Parameters
The type of the key used to uniquely identify each item.
A list of SegmentedControlItem.Icon that can only contain icons.
The key of the selected item.
The modifier to apply to the layout.
The style of the segmented control.
The size of the segmented control.
Whether the segmented control is fluid or not.
Whether the segmented control is enabled or disabled.
The callback that is called when an item is selected.
See also
Samples
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.SegmentedControl
import net.ikea.skapa.ui.components.SegmentedControlItem
import net.ikea.skapa.ui.components.SegmentedControlSize
import net.ikea.skapa.ui.components.SegmentedControlStyle
fun main() {
//sampleStart
SkapaTheme2(isSystemInDarkTheme()) {
// Selected state
var selectedLabel by remember { mutableStateOf("a") }
// List of items of icon type, with content description
val itemsLabel = listOf(
SegmentedControlItem.Icon("a", R.drawable.ic_avatar_person, "Content Description"),
SegmentedControlItem.Icon("b", R.drawable.ic_avatar_person, "Content Description"),
SegmentedControlItem.Icon("c", R.drawable.ic_avatar_person, "Content Description"),
SegmentedControlItem.Icon("d", R.drawable.ic_avatar_person, "Content Description")
)
SegmentedControl(
iconItems = itemsLabel, // Only icon items
style = SegmentedControlStyle.Regular,
size = SegmentedControlSize.Icon.Small, // Specific sizing for icon items, only small and medium available
selectedKey = selectedLabel, // Set selected index
enabled = true, // Entire component is enabled or disabled
onSelect = {
// Update the selected item when clicked
selectedLabel = it
}
)
}
//sampleEnd
}