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.

Usage

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 {

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

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