Design/net.ikea.skapa.ui.components/SegmentedControl

SegmentedControl

@Composable
fun <T> SegmentedControl(textItems: List<SegmentedControlItem.Text<T>>, selectedKey: T, modifier: Modifier = Modifier, style: SegmentedControlStyle = SegmentedControlStyle.Regular, size: SegmentedControlTextItemSize = SegmentedControlTextItemSize.Medium, enabled: Boolean = true, onSelect: (T) -> Unit)

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

textItems

A list of SegmentedControlItem.Text that can only contain text.

selectedKey

The key of the selected item.

modifier

The modifier to apply to the layout.

style

The style of the segmented control.

size

The size of the segmented control.

enabled

Whether the segmented control is enabled or disabled.

onSelect

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.SegmentedControlIconItemSize
import net.ikea.skapa.ui.components.SegmentedControlItem
import net.ikea.skapa.ui.components.SegmentedControlStyle
import net.ikea.skapa.ui.components.SegmentedControlTextItemSize

fun main() { 
   //sampleStart 
   SkapaThemeM3(isSystemInDarkTheme()) {
    // Selected state
    var selectedLabel by remember { mutableStateOf<String>("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 = SegmentedControlTextItemSize.Medium, // 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
}
@Composable
fun <T> SegmentedControl(iconItems: List<SegmentedControlItem.Icon<T>>, selectedKey: T, modifier: Modifier = Modifier, style: SegmentedControlStyle = SegmentedControlStyle.Regular, size: SegmentedControlIconItemSize = SegmentedControlIconItemSize.Medium, isFluid: Boolean = true, enabled: Boolean = true, onSelect: (T) -> Unit)

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

iconItems

A list of SegmentedControlItem.Icon that can only contain icons.

selectedKey

The key of the selected item.

modifier

The modifier to apply to the layout.

style

The style of the segmented control.

size

The size of the segmented control.

isFluid

Whether the segmented control is fluid or not.

enabled

Whether the segmented control is enabled or disabled.

onSelect

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.SegmentedControlIconItemSize
import net.ikea.skapa.ui.components.SegmentedControlItem
import net.ikea.skapa.ui.components.SegmentedControlStyle
import net.ikea.skapa.ui.components.SegmentedControlTextItemSize

fun main() { 
   //sampleStart 
   SkapaThemeM3(isSystemInDarkTheme()) {
    // Selected state
    var selectedLabel by remember { mutableStateOf<String>("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 = SegmentedControlIconItemSize.Medium, // Specific sizing for icon items, only medium and large available
        selectedKey = selectedLabel, // Set selected index
        enabled = true, // Entire component is enabled or disabled
        onSelect = {
            // Update the selected item when clicked
            selectedLabel = it
        }
    )
} 
   //sampleEnd
}