CODEWITHSUNDEEP
swiftuitoolbaritems
Michel Donais
Michel Donais

Reputation: 484

SwiftUI 2.0 ToolbarItem Labels showing sideways

Trying to figure out how to put the icons of the new SwiftUI toolbar on top of the text, like they are supposed to be on the bottom toolbar. Currently, they show up sideways, which is weird.

File and Print shown with horizontal alignment

This is my piece of code that shows them

content.toolbar {
    ToolbarItem(placement: .bottomBar) {
        Button {
            menu.value = .file
        } label: {
            Label(LocalizedStringKey("menu.file"),
                  systemImage: Symbol.SymbolEnum.sf_folder.systemName! )
        }
    }
    ToolbarItem(placement: .bottomBar) {
        Button {
            menu.value = .export
        } label: {
            Label(LocalizedStringKey("menu.export"),
                  systemImage: Symbol.SymbolEnum.sf_square_and_arrow_up.systemName! )
        }
    }
}

I know it is simple to do a VStack, but I seriously thought this was the entire goal of a Label, to be able to provide something contextually adequate, and in this case, it would be a vertical orientation for the icon and text.

Upvotes: 2

Views: 1124

Answers (1)

Asperi
Asperi

Reputation: 258413

There is LabelStyle for this purpose, so we could configure labels as needed.

So here is possible approach

struct VerticalLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack(spacing: 0) {
            configuration.title
            configuration.icon
        }
    }
}

and now apply it to entire toolbar or to needed labels only

Label(LocalizedStringKey("menu.file"),
      systemImage: Symbol.SymbolEnum.sf_folder.systemName! )
  .labelStyle(VerticalLabelStyle())

Upvotes: 4

Related Questions