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": {
"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": [
{
@@ -910,7 +910,7 @@
{
"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",
"version": "1.0.2",
"version": "1.0.3",
"author": {
"name": "Seth Hobson",
"email": "seth@major7apps.com"

View File

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

View File

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