CODEWITHSUNDEEP
swiftmacosswiftuitoolbar
mikro098
mikro098

Reputation: 2353

macOS toolbar items with image and text in SwiftUI

I'd like to achieve something similar in SwiftUI to what is described in Apple's Human Interface Guidelines about toolbars.

enter image description here

I tried using .toolbar { } but items are too small and NavigationLink doesn't change the selected View. I tried setting ExpandedWindowToolbarStyle() on WindowGroup.

Code:

NavigationView { }
        .toolbar {
            ToolbarItem(placement: ToolbarItemPlacement.automatic) {
                HStack {
                    Text("")
                    NavigationLink(
                        destination: getDestination(forOption: Option.home)) {
                        VStack {
                            Image(systemName: Option.home.iconName)

                            Text("test")
                        }
                        .frame(height: 50)


                    }
                }

            }
        }

current state:

enter image description here

Upvotes: 1

Views: 1318

Answers (1)

Stephan Michels
Stephan Michels

Reputation: 1082

You can use a customizable toolbar and labels.

enter image description here

        .toolbar(id: "Main") {
            ToolbarItem(id: "Sidebar") {
                Button(action: {}) {
                    Label("Sidebar", systemImage: "sidebar.right")
                }
            }
        }

Also it might be possible to use TitleAndIconLabelStyle with MacOS 11.3. I haven't tried it yet.

Upvotes: 2

Related Questions