mirror of
https://github.com/wshobson/agents.git
synced 2026-03-18 09:37:15 +00:00
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:
@@ -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"
|
||||||
|
|||||||
@@ -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)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user