Structure¶

PageTabViewStyle¶

A TabViewStyle that implements a paged scrolling TabView.¶

Declaration¶

struct PageTabViewStyle : TabViewStyle

Overview¶

Use this style with the tabViewStyle(_:) view modifier to change the style of a TabView to look like swipable pages:

struct ContentView: View {
    var body: some View {
        TabView {
            Text("Bananas 🍌🍌")
            Text("Apples 🍏🍏")
            Text("Peaches 🍑🍑")
        }
        .foregroundColor(Color.white)
        .background(Color.yellow)
        .tabViewStyle(PageTabViewStyle())
    }
}

A gif displaying a tabview with three text items, "Bananas 🍌🍌", "Apples 🍏🍏", and "Peaches 🍑🍑", and a yellow background; the gif displays the page tab view style by flipping through each of the three tabs, as reflected by the page indicator dots at the bottom of the frame.

You can also use PageTabViewStyle's initializer init(indexDisplayMode:) to specify whether or not you want the page dots at the bottom to show up:

struct ContentView: View {
    var body: some View {
        TabView {
            Text("Bananas 🍌🍌")
            Text("Apples 🍏🍏")
            Text("Peaches 🍑🍑")
        }
        .foregroundColor(Color.white)
        .background(Color.yellow)
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
    }
}

Availability¶

iOS 14.0+

tvOS 14.0+

watchOS 7.0+

Topics¶

Structure¶

IndexDisplayMode A style for displaying the page index view.

Initializer¶

init(indexDisplayMode:) Creates a new PageTabViewStyle with an index display mode