Search code examples
swiftuitoolbaritems

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.

Solution

  • 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())