Updated for Xcode 14.2
Updated for iOS 15
One subtle but important feature of macOS is the way sidebars are automatically made slightly transparent when a window is active, then made opaque when the window moves to the background – it’s a small hint to the user which window is active, but also lets a little of their background show through, giving them a little context of their environment.
SwiftUI allows us to create these translucent sidebars using the listStyle()
modifier on List
, passing in .sidebar
(or SidebarListStyle()
for Xcode 12) like this:
NavigationStack {
List(1..<51) {
Text("\($0)")
}
.listStyle(.sidebar)
}
Important: If you’re using Xcode 12 you need to use SidebarListStyle()
rather than .sidebar
.
There’s nothing stopping you from using that with any list, but the clue is in the name: it’s specifically designed for lists that are shown on the side of your main window, as you can see in Xcode’s navigators.
Note: on iOS and iPadOS, .sidebar
does not provide translucent background, but does affect the cell styling.
SPONSORED From March 20th to 26th, you can join a FREE crash course for mid/senior iOS devs who want to achieve an expert level of technical and practical skills – it’s the fast track to being a complete senior developer!
Sponsor Hacking with Swift and reach the world's largest Swift community!
Link copied to your pasteboard.