Tab Bar

Represents a Material UI styled container for bottom tab items, used to organize and switch between different views.

Overview

The TabBar provides a Material UI-styled tab bar for navigation within a view. It positions the tab bar at the bottom of the screen and allows switching between different tab items.

To use the TabBar, initialize it with a TabBarItem binding to the selected tab item and the main content of the view. Add tab items using the tabBarItem modifier, specifying the system image and title for each item.

Initializer

Creates a container view with a bottom tab bar.

TabBar(selection: Binding<TabBarItem>, @ViewBuilder content: () -> Content)

Parameters

Parameter	Description
selection	Binding to the selected tab item.
content	A closure that returns the main content view of the tab bar.

For more information regarding the TabBarItem, refer to the documentation for the

TabBar Item model.

Modifier

Sets up a tab bar item with the specified system image, title, and selection binding.

tabBarItem(
    systemImage: String,
    titleKey: String,
    selection: Binding<TabBarItem>
)

Example

@State private var selection = TabBarItem(systemImage: "house.fill", titleKey: "Home")

var body: some View {
    TabBar(selection: $selection) {
        Text("Home View")
            .tabBarItem(systemImage: "house.fill", titleKey: "Home", selection: $selection)
        
        Text("Profile View")
            .tabBarItem(systemImage: "person.fill", titleKey: "Profile", selection: $selection)
        
        Text("Notifications")
            .tabBarItem(systemImage: "bell.fill", titleKey: "Notifications", selection: $selection)
        
        Text("Settings")
            .tabBarItem(systemImage: "gear", titleKey: "Settings", selection: $selection)
    }
}