Segmented control elements display a horizontal set of segments that show different views or states. Our segmented control element lets you customize Apple’s native segmented control in your design.
Segment
The Segment property lets you adjust the number of segments and their names. Type as many segment names in the order you'd like them in, with commas between each one.
Selected Segment
The Select Segment property is used to choose which segment you would like to be selected at first. You can choose to select any of the segments or none of them.
Colors
Use the Color attributes to select the background color for the full segmented control and the selected segment from your list of Color styles. You can also add a new color style by tapping the property’s chain icon in iOS/iPadOS or opening the Styles Panel in macOS.
Control Padding
Add top and bottom padding to your segmented control.
Segment Selected Trigger
Segmented control has a specific trigger associated with it called Segment Selected. This trigger will fire when the user selects a segment other than the one currently selected. You can use the Segment property to choose whether this trigger fires on any change in selection or only when a specific segment is selected.
Set Segment Action
Segmented control also has an action, Set Segment. When you fire your chosen trigger, this action will select a chosen segment.
Using the Segmented Control with a Horizontal Stack
Add an H stack to your page and set the with to 100% and height to 100%. Add two objects with 100% width to your stack. Add a segmented control to your page, pin it to the top center, and offset it from the top by 48pt.
With the segmented control selected, go to the Interactions tab. Add a Segment Selected Trigger, go to the trigger settings, and set the Segment to Segment 1.
Add a Set Scroll Action. Set the Target as the H stack, the Type to Scroll To, the Direction to Horizontal, and the End State to 0%.
Now, add another Segment Selected Trigger, go to the trigger settings, and set the Segment to Segment 2.
Add a Set Scroll Action. Set the Target as the H stack, the Type to Scroll To, the Direction to Horizontal, and the End State to 100%.