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

Toggle

@JvmName(name = "ToggleWithLabel")

fun ~~Toggle~~(toggleOptions: List<ToggleItem.Text>, modifier: Modifier = Modifier, selectedIndex: Int = 0, fluidState: Boolean = false, onSelect: (index: Int) -> Unit)(source)

Deprecated

This component is deprecated, please transition to using SegmentedControl instead.

Toggle component is a control that allows a single selection of a list of mutually exclusive options. The component comes with a predefined appearance based on Skapa design and guidelines.

Toggle component is built in two variants, which relies on ToggleItem to create a list and direct the content of the Toggle. The ToggleItem consists of ToggleItem.Text and ToggleItem.Icon data classes which contain the content to be displayed in each section of the Toggle component.

Toggles should be associated with either a label or an icon, not both. Toggle component is created in two variant functions to refrain from mixing.

Parameters

toggleOptions

list of ToggleItem.Text data class which contain relevant content information.

modifier

Modifier to be applied to the toggle layout.

selectedIndex

boolean state for toggle section selection: either it is selected or not.

fluidState

boolean state determining if the component is to grow to fill max width or wrap to content.

onSelect

callback to be invoked when the Toggle is being clicked.

Samples

SkapaTheme2(isSystemInDarkTheme()) {
    Column {
        var selectedLabel by remember { mutableIntStateOf(0) }
        val itemsLabel = listOf(
            ToggleItem.Text("Label", enabled = true),
            ToggleItem.Text("Label", enabled = true)
        )
        val itemsLabelMulti = listOf(
            ToggleItem.Text("Label", enabled = true),
            ToggleItem.Text("Label", enabled = true),
            ToggleItem.Text("Label", enabled = false)
        )
        Toggle(toggleOptions = itemsLabel, selectedIndex = selectedLabel) { selectedLabel = it }
        Toggle(toggleOptions = itemsLabelMulti, selectedIndex = selectedLabel) {
            selectedLabel = it
        }
        Toggle(toggleOptions = itemsLabel, fluidState = true, selectedIndex = selectedLabel) { selectedLabel = it }
        Toggle(toggleOptions = itemsLabelMulti, fluidState = true, selectedIndex = selectedLabel) { selectedLabel = it }
    }
}

SkapaTheme2(isSystemInDarkTheme()) {
    Column {
        var selectedLabel by remember { mutableIntStateOf(0) }
        val itemsIcon = listOf(
            ToggleItem.Icon(R.drawable.ic_switch_checkmark, "Content Description", enabled = true),
            ToggleItem.Icon(R.drawable.ic_switch_checkmark, "Content Description", enabled = true)
        )
        val itemsIconMulti = listOf(
            ToggleItem.Icon(R.drawable.ic_switch_checkmark, "Content Description", enabled = true),
            ToggleItem.Icon(R.drawable.ic_switch_checkmark, "Content Description", enabled = true),
            ToggleItem.Icon(R.drawable.ic_switch_checkmark, "Content Description", enabled = true)
        )
        Toggle(toggleOptions = itemsIcon, selectedIndex = selectedLabel) { selectedLabel = it }
        Toggle(toggleOptions = itemsIconMulti, selectedIndex = selectedLabel) { selectedLabel = it }
        Toggle(toggleOptions = itemsIcon, fluidState = true, selectedIndex = selectedLabel) { selectedLabel = it }
        Toggle(toggleOptions = itemsIconMulti, fluidState = true, selectedIndex = selectedLabel) { selectedLabel = it }
    }
}

@JvmName(name = "ToggleWithIcon")

@Composable

fun ~~Toggle~~(toggleOptions: List<ToggleItem.Icon>, modifier: Modifier = Modifier, selectedIndex: Int = 0, fluidState: Boolean = false, onSelect: (index: Int) -> Unit)(source)

Deprecated

This component is deprecated, please transition to using SegmentedControl instead.

Toggle component is a control that allows a single selection of a list of mutually exclusive options. The component comes with a predefined appearance based on Skapa design and guidelines.

Toggles should be associated with either a label or an icon, not both. Toggle component is created in two variant functions to refrain from mixing.

Parameters

toggleOptions

list of ToggleItem.Icon data class which contain relevant content information.

modifier

Modifier to be applied to the toggle layout.

selectedIndex

state for toggle section selection: either it is selected or not.

fluidState

boolean state determining if the component is to grow to fill max width or wrap to content.

onSelect

callback to be invoked when the Toggle is being clicked.

Samples

SkapaTheme2(isSystemInDarkTheme()) {
    Column {
        var selectedLabel by remember { mutableIntStateOf(0) }
        val itemsLabel = listOf(
            ToggleItem.Text("Label", enabled = true),
            ToggleItem.Text("Label", enabled = true)
        )
        val itemsLabelMulti = listOf(
            ToggleItem.Text("Label", enabled = true),
            ToggleItem.Text("Label", enabled = true),
            ToggleItem.Text("Label", enabled = false)
        )
        Toggle(toggleOptions = itemsLabel, selectedIndex = selectedLabel) { selectedLabel = it }
        Toggle(toggleOptions = itemsLabelMulti, selectedIndex = selectedLabel) {
            selectedLabel = it
        }
        Toggle(toggleOptions = itemsLabel, fluidState = true, selectedIndex = selectedLabel) { selectedLabel = it }
        Toggle(toggleOptions = itemsLabelMulti, fluidState = true, selectedIndex = selectedLabel) { selectedLabel = it }
    }
}

SkapaTheme2(isSystemInDarkTheme()) {
    Column {
        var selectedLabel by remember { mutableIntStateOf(0) }
        val itemsIcon = listOf(
            ToggleItem.Icon(R.drawable.ic_switch_checkmark, "Content Description", enabled = true),
            ToggleItem.Icon(R.drawable.ic_switch_checkmark, "Content Description", enabled = true)
        )
        val itemsIconMulti = listOf(
            ToggleItem.Icon(R.drawable.ic_switch_checkmark, "Content Description", enabled = true),
            ToggleItem.Icon(R.drawable.ic_switch_checkmark, "Content Description", enabled = true),
            ToggleItem.Icon(R.drawable.ic_switch_checkmark, "Content Description", enabled = true)
        )
        Toggle(toggleOptions = itemsIcon, selectedIndex = selectedLabel) { selectedLabel = it }
        Toggle(toggleOptions = itemsIconMulti, selectedIndex = selectedLabel) { selectedLabel = it }
        Toggle(toggleOptions = itemsIcon, fluidState = true, selectedIndex = selectedLabel) { selectedLabel = it }
        Toggle(toggleOptions = itemsIconMulti, fluidState = true, selectedIndex = selectedLabel) { selectedLabel = it }
    }
}

Toggle

Deprecated

Parameters

See also

Samples

Deprecated

Parameters

See also

Samples