Structure¶

PageIndexViewStyle¶

An index view style that places a page index view over its content.¶

Declaration¶

struct PageIndexViewStyle : IndexViewStyle

Overview¶

struct ExampleView: View {
    @State var items = ["Bananas 🍌🍌", "Apples 🍏🍏", "Peaches 🍑🍑"]

    var body: some View {
        TabView {
            ForEach(items, id: \.self) {
                Text($0)
            }
        }
        .tabViewStyle(PageTabViewStyle())
        .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .never))
    }
}

A gif flipping through the pages of a TabView with three items, "Bananas 🍌🍌", "Apples 🍏🍏", "Peaches 🍑🍑", derived from a state variable; the TabView has no page index indicators.

Currently the PageIndexViewStyle is the only type that allows for customization over a page index view. To configure the current IndexViewStyle for a view hierarchy, use the .indexViewStyle() modifier. When creating a new PageIndexViewStyle, it will default to the .automatic BackgroundDisplayMode if none is specified.

For example:

struct ExampleView: View {
    var body: some View {
        TabView {
            Text("Tab 1")
            Text("Tab 2")
            Text("Tab 3")
        }
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
        .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
    }
}

A gif flipping through the pages of a TabView with three text views, "Tab 1", "Tab 2", and "Tab 3", as reflected in the page index indicator dots at the bottom of the frame.

Availability¶

iOS 14.0+

tvOS 14.0+

Topics¶

Structure¶

BackgroundDisplayMode The background style for the page index view.

Initializer¶

init(backgroundDisplayMode:) Creates a page index view style.