Segmented Buttons

Represents a Material UI styled segmented control for switching between options.

Overview

The SegmentedButton provides a segmented control with Material UI styling, allowing users to switch between different options.

To use SegmentedButton, initialize it with a collection of data, a key path to identify each element, a binding to the currently selected element, and a closure to define the content for each segment.

Initializer

Creates a segmented control with the given data, identifier, and content.

SegmentedButton(
    _ data: Data,
    id: KeyPath<Data.Element, ID>,
    selection: Binding<Data.Element>,
    @ViewBuilder _ content: @escaping (Data.Element) -> Content
)

Parameters

Parameter	Description
data	A collection of elements to display in the segmented control.
id	A key path to an ID property on each element to uniquely identify them.
selection	A binding to the currently selected element in the segmented control.
content	A closure that returns the content view for a given element.

Example

@State private var selectedOption: String = "Option 2"
private let options: [String] = ["Option 1", "Option 2", "Option 3"]

var body: some View {
    Container {
        SegmentedButton(options, id: \.self, selection: $selectedOption) { option in
            Text(option)
        }
    }
}

SegmentedButton is compatible with custom data models that conform to Hashable and Identifiable protocols.