fix(ui-design): update TabView examples to iOS 18 Tab API (#438)

Replace deprecated .tabItem modifier pattern with modern Tab struct
across mobile-ios-design skill and navigation reference docs.
This commit is contained in:
Seth Hobson
2026-02-21 07:47:50 -05:00
parent 5140d20204
commit ade0c7a211
3 changed files with 31 additions and 45 deletions

View File

@@ -7,7 +7,7 @@
}, },
"metadata": { "metadata": {
"description": "Production-ready workflow orchestration with 72 focused plugins, 112 specialized agents, and 146 skills - optimized for granular installation and minimal token usage", "description": "Production-ready workflow orchestration with 72 focused plugins, 112 specialized agents, and 146 skills - optimized for granular installation and minimal token usage",
"version": "1.5.4" "version": "1.5.5"
}, },
"plugins": [ "plugins": [
{ {
@@ -910,7 +910,7 @@
{ {
"name": "ui-design", "name": "ui-design",
"description": "Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns", "description": "Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns",
"version": "1.0.2", "version": "1.0.3",
"author": { "author": {
"name": "Seth Hobson", "name": "Seth Hobson",
"email": "seth@major7apps.com" "email": "seth@major7apps.com"

View File

@@ -104,7 +104,7 @@ struct ContentView: View {
} }
``` ```
**TabView:** **TabView (iOS 18+):**
```swift ```swift
struct MainTabView: View { struct MainTabView: View {
@@ -112,23 +112,17 @@ struct MainTabView: View {
var body: some View { var body: some View {
TabView(selection: $selectedTab) { TabView(selection: $selectedTab) {
HomeView() Tab("Home", systemImage: "house", value: 0) {
.tabItem { HomeView()
Label("Home", systemImage: "house") }
}
.tag(0)
SearchView() Tab("Search", systemImage: "magnifyingglass", value: 1) {
.tabItem { SearchView()
Label("Search", systemImage: "magnifyingglass") }
}
.tag(1)
ProfileView() Tab("Profile", systemImage: "person", value: 2) {
.tabItem { ProfileView()
Label("Profile", systemImage: "person") }
}
.tag(2)
} }
} }
} }

View File

@@ -294,7 +294,7 @@ struct CustomSheetView: View {
## Tab Navigation ## Tab Navigation
### Basic TabView ### Basic TabView (iOS 18+)
```swift ```swift
struct MainTabView: View { struct MainTabView: View {
@@ -302,37 +302,31 @@ struct MainTabView: View {
var body: some View { var body: some View {
TabView(selection: $selectedTab) { TabView(selection: $selectedTab) {
HomeView() Tab("Home", systemImage: "house", value: 0) {
.tabItem { HomeView()
Label("Home", systemImage: "house") }
}
.tag(0)
SearchView() Tab("Search", systemImage: "magnifyingglass", value: 1) {
.tabItem { SearchView()
Label("Search", systemImage: "magnifyingglass") }
}
.tag(1)
ProfileView() Tab("Profile", systemImage: "person", value: 2) {
.tabItem { ProfileView()
Label("Profile", systemImage: "person") }
} .badge(unreadCount)
.tag(2)
.badge(unreadCount)
} }
} }
} }
``` ```
### Tab with Custom Badge ### Tab with Custom Badge (iOS 18+)
```swift ```swift
struct BadgedTabView: View { struct BadgedTabView: View {
@State private var selectedTab: Tab = .home @State private var selectedTab: AppTab = .home
@State private var cartCount = 3 @State private var cartCount = 3
enum Tab: String, CaseIterable { enum AppTab: String, CaseIterable {
case home, search, cart, profile case home, search, cart, profile
var icon: String { var icon: String {
@@ -347,14 +341,12 @@ struct BadgedTabView: View {
var body: some View { var body: some View {
TabView(selection: $selectedTab) { TabView(selection: $selectedTab) {
ForEach(Tab.allCases, id: \.self) { tab in ForEach(AppTab.allCases, id: \.self) { tab in
NavigationStack { Tab(tab.rawValue.capitalized, systemImage: tab.icon, value: tab) {
contentView(for: tab) NavigationStack {
contentView(for: tab)
}
} }
.tabItem {
Label(tab.rawValue.capitalized, systemImage: tab.icon)
}
.tag(tab)
.badge(tab == .cart ? cartCount : 0) .badge(tab == .cart ? cartCount : 0)
} }
} }