Segmented Control
You can edit 8 Components for free. Get premium for unlimited access.
Choose between Figma, SwiftUI, React Native or Jetpack Compose Documentation.
Figma
The Segment Control component allows users to switch between multiple options and provides an animated selection indicator.
1. Reference
This component inherits props from the Segmented Control.
2. Count
You can edit the count with the 2, 3 or 4 parameter.
Image 2.1 : Count 2
Image 2.2 : Count 3
Image 2.3 : Count 4
3. State
You can edit the state with the default, selected or disabled parameter.
Image 3.1 : State default
Image 3.1 : State disabled
SwiftUI
The DLSegmentControl component allows users to switch between multiple options and provides an animated selection indicator.
1. Reference
This component inherits props from the Segmented Control.
label
state
-
.normal
.disabled
.normal
-
-
2. Items
You can edit the items with the label or state parameter.
DLSegmentControlInputModel(label: "Label-1")
DLSegmentControl(
items: [
DLSegmentControlInputModel(
label: "Label-1",
state: .normal
),
DLSegmentControlInputModel(
label: "Label-2",
state: .normal
)
],
selection: $selectedItem
)
3. State
You can edit the state with the list parameter.
DLSegmentControlInputModel(label: "Label-1")
DLSegmentControl(
items: [
DLSegmentControlInputModel(
label: "Label-1",
state: .normal
),
DLSegmentControlInputModel(
label: "Label-2",
state: .disabled
)
],
selection: $selectedItem
)
Jatpack Compose
The SegmentControl component allows users to switch between multiple options and provides an animated selection indicator.
1. Reference
This component inherits props from the Segmented Control.
label
-
-
-
2. Items
You can edit the items with the label parameter.
selectedIndex=selectedItemDouble,
items = {
item(
label = "Label-1",
onClick = {
selectedItemDouble = 0
}
)
item(
label = "Label-2",
onClick = {
selectedItemDouble = 1
}
)
})
3. State
You can edit the state with the SegmentedControlState.default or SegmentedControlState.disabled parameter.
selectedIndex=selectedItemDouble,
items = {
item(
label = "Label-1",
onClick = {
selectedItemDouble = 0
}
)
item(
label = "Label-2",
state = SegmentedControlState.disabled,
onClick = {
selectedItemDouble = 1
}
)
})
React Native
This component is on the roadmap and in Progress This means that it is currently being edited and will be published in the next few weeks/months. Check back often to stay informed about the latest updates.
🚧
Discover more content
You have questions or need help?
You want to try?
Save time and money?