Generic Structure

TabView

A view that switches between multiple child views using interactive user interface elements.

Declaration

struct TabView<SelectionValue, Content> where SelectionValue : Hashable, Content : View

Overview

To create a user interface with tabs, place views in a TabView and apply the tabItem(_:) modifier to the contents of each tab. The following creates a tab view with three tabs:

TabView {
    Text("The First Tab")
        .tabItem {
            Image(systemName: "1.square.fill")
            Text("First")
        }
    Text("Another Tab")
        .tabItem {
            Image(systemName: "2.square.fill")
            Text("Second")
        }
    Text("The Last Tab")
        .tabItem {
            Image(systemName: "3.square.fill")
            Text("Third")
        }
}
.font(.headline)

Tab views only support tab items of type Text, Image, or an image followed by text. Passing any other type of view results in a visible but empty tab item.

Topics

Applying Standard Modifiers

View Modifiers

Configure this view and the views it contains by applying standard modifiers.

Relationships

Conforms To

See Also

Architectural Views

struct NavigationView

A view for presenting a stack of views representing a visible path in a navigation hierarchy.

struct HSplitView

A layout container that arranges its children in a horizontal line and allows the user to resize them using dividers placed between them.

struct VSplitView

A layout container that arranges its children in a vertical line and allows the user to resize them using dividers placed between them.