navigation-patterns
Navigation patterns: NavigationStack, TabView, split view, deep linking. Use when implementing UI patterns related to navigation.
소스 정보
- 저장소
- moasq/nanowave
- 최근 소스 활동
- 2026년 3월 20일 18:33
- 감지된 SKILL.md 언어
- 영어
- 스타
- 32
- 포크
- 9
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
파일 탐색기
3 개 파일SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- navigation-patterns
- description
- Navigation patterns: NavigationStack, TabView, split view, deep linking. Use when implementing UI patterns related to navigation.
- tags
- swiftui, ui-patterns
# Navigation Pattern Rules
## Pattern Selection Guide
| Pattern | When to Use |
|---------|-------------|
| `NavigationStack` | Hierarchical drill-down (list → detail → edit) |
| `TabView` with `Tab` API | 3+ distinct top-level peer sections |
| `.sheet(item:)` | Creation forms, secondary actions, settings |
| `.fullScreenCover` | Immersive experiences (media player, onboarding) |
| `NavigationStack` + `.sheet` | Most MVPs with 2-4 features |
## NavigationStack
Use for hierarchical navigation with a back button:
```swift
NavigationStack {
List(items) { item in
NavigationLink(value: item) {
ItemRow(item: item)
}
}
.navigationDestination(for: Item.self) { item in
ItemDetailView(item: item)
}
.navigationTitle("Items")
}
```
## TabView with Tab API
Use when the app has 3+ distinct, peer-level sections:
```swift
TabView {
Tab("Home", systemImage: "house") {
HomeView()
}
Tab("Search", systemImage: "magnifyingglass") {
SearchView()
}
Tab("Profile", systemImage: "person") {
ProfileView()
}
}
```
## Sheets
Choose the right sheet variant based on context:
- **`.sheet(item:)`** — for editing or viewing an existing item (the item drives the sheet)
- **`.sheet(isPresented:)`** — acceptable for creation forms and simple actions (no item yet)
```swift
// Editing/viewing an existing item — use item-driven
@State private var editingItem: Item?
.sheet(item: $editingItem) { item in
EditItemView(item: item)
}
// Creating a new item — isPresented is fine
@State private var showAddItem = false
.sheet(isPresented: $showAddItem) {
AddItemView()
}
```
## Full Screen Cover
Use for immersive content that should cover the entire screen:
```swift
@State private var showOnboarding = false
.fullScreenCover(isPresented: $showOnboarding) {
OnboardingView()
}
```
## Type-Safe Routing
Always use `navigationDestination(for:)` for type-safe routing:
```swift
// Define route types
.navigationDestination(for: Note.self) { note in
NoteDetailView(note: note)
}
.navigationDestination(for: Category.self) { category in
CategoryView(category: category)
}
```
GitHub에서 보기