How to make popup button in SwiftUI for macOS

Issue #748

There is said to be PopUpButtonPickerStyle and MenuPickerStyle but these don’t seem to work.

There’s Menu button it shows a dropdown style. We fake it by fading this and overlay with a button. allowsHitTesting does not work, but disabled seems to do the trick

Menu {
    Button("About", action: ActionService.onAbout)
    Button("Quit", action: ActionService.onQuit)
} label: {
    Text("")
}
.frame(width: 24)
.opacity(0.01)
.overlay(
    makeButton(action: {}, "gearshape.fill")
        .disabled(true)
        .foregroundColor(Color.secondaryLabel)
)

Follow pika

struct ColorMenu: View {
    var eyedropper: Eyedropper

    var body: some View {
        if #available(OSX 11.0, *) {
            Menu {
                ColorMenuItems(eyedropper: eyedropper)
            } label: {
                Image(systemName: "ellipsis.circle")
            }
            .menuStyle(BorderlessButtonMenuStyle(showsMenuIndicator: false))
        } else {
            MenuButton(label: IconImage(name: "ellipsis.circle"), content: {
                ColorMenuItems(eyedropper: eyedropper)
            })
                .menuButtonStyle(BorderlessButtonMenuButtonStyle())
        }
    }
}

struct ColorMenuItems: View {
    var eyedropper: Eyedropper
    let pasteboard = NSPasteboard.general

    var body: some View {
        VStack(alignment: .leading, spacing: 0.0) {
            Text(eyedropper.title)
            Divider()
        }
        Button(action: {
            pasteboard.clearContents()
            pasteboard.setString(eyedropper.color.toHex, forType: .string)
        }, label: { Text("Copy color hex") })
        Button(action: {
            pasteboard.clearContents()
            pasteboard.setString(eyedropper.color.toRGB, forType: .string)
        }, label: { Text("Copy RGB values") })
        Button(action: {
            pasteboard.clearContents()
            pasteboard.setString(eyedropper.color.toHSB, forType: .string)
        }, label: { Text("Copy HSB values") })
    }
}

Need to specify .fixedSize() for menu rows to hug content. Can also use opacity to reduce Menu button color

Menu
    .fixedSize()
    .opacity(0.8)
Written by

I’m open source contributor, writer, speaker and product maker.

Start the conversation