Developer Docs - Mobile Docs - Segment Picker

M v1.0

Inherits from ContentView

Think of the Segment Picker as somewhere between a single select field and a set of tabs. Basically, it displays a single horizontal bar with each option making up a segment of the bar. Visually, as the user selects different segments, the control updates to put a border around that segment.

Because the control shows only one row, avoid adding too many or overly long item names, especially for narrow phone screens.

Properties 

Note that you cannot set the background-color via CSS, however the BackgroundColor property in XAML works just fine.

Examples

Styling

You can target special CSS properties to style certain aspects of the picker.

^SegmentPicker {
  -rock-tint-color: red;
  -rock-selected-tint-color: orange;
}