SwiftUI 2.0 ToolbarItem Labels showing sideways

Question

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.

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.

score 4 · Accepted Answer · edited Aug 23 '22 at 15:01

4

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

edited Aug 23 '22 at 15:01

Martijn Pieters

1,048,767
296
4,058
3,343

answered Jul 18 '20 at 17:23

Asperi

228,894
20
464
690

So far, seems legit. I am taken aback why this is not already automatically like that. – Michel Donais Jul 18 '20 at 17:29
I ended up doing this: struct VerticalLabelStyle: LabelStyle { func makeBody(configuration: Configuration) -> some View { VStack { VStack { configuration.icon.font(.headline) }.frame(minHeight: 30) configuration.title.font(.subheadline) }.padding([.leading, .trailing], 5) .padding(Edge.Set.bottom, 2) } } – Michel Donais Jul 18 '20 at 17:55
This solution is the way to go since the Toolbar modifier has its own default label styles, by using this method we'll be able to override the default label style. – Nojze Jan 24 '22 at 15:00

SwiftUI 2.0 ToolbarItem Labels showing sideways

1 Answers1