Apple UI Documentation Index
Quick Navigation
Liquid Glass Design
- Overview - Core concepts, platform availability
- AppKit Implementation - NSGlassEffectView usage
- SwiftUI Implementation - glassEffect() modifier
- Common Patterns - Reusable components & techniques
Toolbar Features
- SwiftUI Toolbar Features - Customization, search, transitions
API Quick Lookup
Liquid Glass APIs
| Task | SwiftUI | AppKit |
|---|---|---|
| Apply glass | .glassEffect() | NSGlassEffectView() |
| Set shape | .glassEffect(in: .rect(cornerRadius: 16)) | glass.cornerRadius = 16 |
| Add tint | .glassEffect(.regular.tint(.blue)) | glass.tintColor = NSColor.blue |
| Make interactive | .glassEffect(.regular.interactive()) | Custom mouse tracking |
| Container | GlassEffectContainer { } | NSGlassEffectContainerView() |
| Button style | .buttonStyle(.glass) | Custom GlassButton class |
| Morphing | .glassEffectID("id", in: namespace) | Manual animation |
Toolbar APIs
| Task | SwiftUI Code |
|---|---|
| Customizable toolbar | .toolbar(id: "main") { } |
| Add item | ToolbarItem(id: "save") { } |
| Add spacer | ToolbarSpacer(.flexible) |
| Minimize search | .searchToolbarBehavior(.minimize) |
| Reposition system item | DefaultToolbarItem(kind: .search, placement: .bottomBar) |
| Transition source | .matchedTransitionSource(id: "btn", in: namespace) |
Decision Trees
When to Use Liquid Glass
Choosing Framework
Performance Guidelines
| Scenario | Recommendation | Max Count |
|---|---|---|
| Static UI | Individual glass effects | 5-10 |
| Dynamic lists | Container + lazy loading | 20-30 |
| Animations | Disable during transitions | N/A |
| Scrolling | Disable glass when scrolling | N/A |
Common Tasks
Create Glass Button
- SwiftUI:
Button("Click").buttonStyle(.glass) - AppKit: See Glass Button Pattern
Animate Glass Tint
- SwiftUI:
.glassEffect(.regular.tint(condition ? .blue : .clear)) - AppKit:
NSAnimationContextwithanimator().tintColor
Merge Glass Effects
- SwiftUI: Wrap in
GlassEffectContainer(spacing: 40) - AppKit: Use
NSGlassEffectContainerViewwith spacing
Custom Toolbar
- SwiftUI:
.toolbar(id: "main")withToolbarItem(id: "item")
Platform Requirements
| Feature | iOS/iPadOS | macOS | visionOS |
|---|---|---|---|
| Liquid Glass | 17.0+ | 14.0+ | 1.0+ |
| Customizable Toolbars | 17.0+ | 14.0+ | N/A |
| Glass Button Style | 17.0+ | 14.0+ | 1.0+ |
| Matched Transitions | 17.0+ | 14.0+ | 1.0+ |
Migration Guide
AppKit → SwiftUI
Old Toolbar → New Toolbar
Resources
Apple Documentation
Sample Projects
WWDC Sessions
- Liquid Glass design principles
- Toolbar customization in SwiftUI