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:
NSAnimationContext
withanimator().tintColor
Merge Glass Effects
- SwiftUI: Wrap in
GlassEffectContainer(spacing: 40)
- AppKit: Use
NSGlassEffectContainerView
with 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