TTBaseSUITabView

Layout

A TabView wrapper with three distinct modes: standard tab bar navigation, horizontal swipe pager with page dots, and swipe pager with hidden dots.

TYPE	Description
`.DEFAULT`	Standard bottom tab bar (UITabBar equivalent)
`.PAGE`	Horizontal swipe pager with automatic dot indicators
`.PAGE_HIDDEN_DOTS`	Horizontal swipe pager, dot indicators hidden

🚀 Usage

// Pager carousel (show dots)
@State var currentPage = 0

TTBaseSUITabView(selection: $currentPage, type: .PAGE, bg: .clear) {
    ForEach(banners.indices, id: \.self) { idx in
        BannerView(banner: banners[idx]).tag(idx)
    }
}
.frame(height: 200)
.cornerRadius(TTSize.CORNER_PANEL)

// Pager without dots (fullscreen slides)
TTBaseSUITabView(selection: $slideIndex, type: .PAGE_HIDDEN_DOTS) {
    ForEach(onboardingPages) { page in
        OnboardingPageView(page: page).tag(page.id)
    }
}
.ignoresSafeArea()

// Standard tab bar
TTBaseSUITabView(type: .DEFAULT) {
    HomeView()
        .tabItem { Label("Home", systemImage: "house.fill") }
        .tag(0)
    ProfileView()
        .tabItem { Label("Profile", systemImage: "person.fill") }
        .tag(1)
    SettingsView()
        .tabItem { Label("Settings", systemImage: "gear") }
        .tag(2)
}

📖 Initializers

Init	Parameters
1	`content` — pager, Int selection, no binding
2	`selection, type, content`
3	`selection, type, bg, content`
4	`selection?, type, bg, radius, content` — full control

Pro Tip: For onboarding flows, use .PAGE_HIDDEN_DOTS and control the page indicator yourself with a custom dot view synchronized to $currentPage. This gives you full design freedom over the indicator style and position.

← BaseSUIGroup Spacer & Divider →