MaterialUIKit
Github
  • MaterialUIKit
  • Essentials
    • Configuring and Personalizing
    • Defining a Custom Color Schemes
  • Configuration and Color Schemes
    • MUIKitConfiguration
    • MUIKitColorScheme
  • Components
    • Action Button
      • ActionButtonStyle
    • Checkbox
    • Collection
      • CollectionStyle
    • Container
    • Date Selector
    • Dialog
    • Dialog Sheet
    • Dropdown Menu
      • Dropdown Menu Label
    • FAB
    • Icon Button
      • IconButtonStyle
    • Navigation Container
      • NavigationContainerHeaderStyle
      • Navigation Route
      • Navigation Route Label
    • Progress Bar
    • Radio Buttons Group
    • Search Box
    • Secure Text Box
    • Segmented Buttons
    • Separator
      • SeparatorOrientationStyle
    • Snackbar
    • Switch
    • Time Selector
    • Text Box
    • Tab Bar
      • TabBar Item
Powered by GitBook
On this page
  • Overview
  • Initializer
  • Parameters
  • Example
  1. Components
  2. Tab Bar

TabBar Item

A modal representing an individual item for the tab bar.

Overview

The TabBarItem defines an individual item in the TabBar. Each item includes a system image and a title, which are displayed in the tab bar. This model helps in creating a navigational structure within the bottom tab Bar.

To use TabBarItem initialize it with a system image name and a title. Use it with the tabBarItem modifier to specify each tab item in the TabBar.

Initializer

Creates a tab bar item with the specified system image and title.

TabBarItem(systemImage: String, titleKey: String)

Parameters

Paramters
Description

systemImage

The name of the system image to be used as the tab item’s icon.

title

The text to be displayed as the tab item’s title.

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("Settings")
            .tabBarItem(systemImage: "gear", titleKey: "Settings", selection: $selection)
    }
}
PreviousTab Bar

Last updated 10 months ago