Tabs

tabs

Tabs make it easy to explore and switch between different screens, data sets, and other interactions.

Usage

tabs

import SwiftUI

struct ExampleView: View {

    var tabs:[XelaTabsItem] = [
        XelaTabsItem(id: 0, label: "Chips"),
        XelaTabsItem(id: 1, label: "Badge", badgeText: "2")
    ]

    @State var selectedTabId:Int = 0

    var body: some View {
        XelaTabs(items: tabs, selectedId: $selectedTabId)
    }
}

Properties XelaTabs

Name Type Default Value Required Description
items [XelaTabsItem] - YES Tabs items
selectedId Binding < Int > - YES Selected tab ID
primaryColor Color Color(xelaColor: .Blue6) NO Primary color
secondaryColor Color Color(xelaColor: .Gray6) NO Secondary color
badgeBackground Color Color(xelaColor: .Orange3) NO Badge background color
badgeTextColor Color Color(.white) NO Badge text color
badgeBackgroundSelected Color Color(xelaColor: .Orange3) NO Badge background color selected tab
badgeTextColorSelected Color Color(.white) NO Badge text color selected tab
bottomLineColor Color Color(xelaColor: .Gray10) NO Bottom line color

Properties XelaTabsItem

Name Type Default Value Required Description
id Int - YES Tab item ID
label String NO Tab item label
icon String NO Tab item icon name from Assets
badgeText String NO Tab item badge text