Segmented Control

segmented control

Segmented controls allow users to make a single selection from a set of options. Like buttons, segments can contain text, icons or both.


segmented control

import SwiftUI

struct ExampleView: View {

    var items:[XelaSegmentedControllItem] = [
        XelaSegmentedControllItem(id: 0, label: "Day"),
        XelaSegmentedControllItem(id: 1, label: "Week"),
        XelaSegmentedControllItem(id: 2, label: "Month"),
        XelaSegmentedControllItem(id: 3, label: "Year")
    @State var selectedId:Int = 0

    var body: some View {

            items: items,
            selectedId: $selectedId,
            primaryBackground: Color(xelaColor: .Yellow3),
            secondaryBackground: Color(xelaColor: .Gray12),
            primaryFontColor: Color(xelaColor: .Gray2),
            autoResize: false

Properties XelaSegmentedControll

Name Type Default Value Required Description
items [XelaSegmentedControllItem] - YES Segmented Controll items
selectedId Binding < Int > - YES Binding selected item ID
primaryBackground Color Color(xelaColor: .Blue6) NO Primary - accent - selected background color
secondaryBackground Color Color(xelaColor: .Gray12) NO Secondary background color
primaryFontColor Color Color(.white) NO Primary - accent - selected font color
secondaryFontColor Color Color(xelaColor: .Gray2) NO Secondary font color
autoResize Bool false NO Auto resize items width

Properties XelaSegmentedControllItem

Name Type Default Value Required Description
id Int - YES Item ID
label String NO Item label text
icon String NO Item icon name from assets