CODEWITHSUNDEEP
swiftui
Victor Kushnerov
Victor Kushnerov

Reputation: 3964

How to manually show contextMenu in SwiftUI?

I would like to show contextMenu by clicking on the left mouse button? How to manually show view in SwiftUI?

Image(systemName: "book")
.contextMenu {
   Text("something1")
   Text("something2")
   Text("something3")
}

Upvotes: 2

Views: 4464

Answers (2)

ryanholden8
ryanholden8

Reputation: 714

The currently accepted answer uses MenuButton, which is now deprecated. Below is how to use the new Menu option.

This is possible now via Menu (iOS 14+, MacOS 11+)
Menus are covered in this WWDC video at ~11:15.

Playground Example:

import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    
    var body: some View {
        HStack {
            // Other views
            Text("Example View 1")

            // Button, that when tapped shows 3 options
            Menu {
                Button(action: {
                    
                }) {
                    Label("Add", systemImage: "plus.circle")
                }
                Button(action: {
                    
                }) {
                    Label("Delete", systemImage: "minus.circle")
                }
                Button(action: {
                    
                }) {
                    Label("Edit", systemImage: "pencil.circle")
                }
            } label: {
                Image(systemName: "ellipsis.circle")
            }
        }
        .frame(width: 300, height: 300, alignment: .center)
    }
}

PlaygroundPage.current.setLiveView(ContentView())

If you wish to support MacOS 10.15 you could do something like:

if #available(iOS 14, macOS 11, *) {
    Menu {
        Button(action: {
            
        }) {
            Label("Add", systemImage: "plus.circle")
        }
        Button(action: {
            
        }) {
            Label("Delete", systemImage: "minus.circle")
        }
        Button(action: {
            
        }) {
            Label("Edit", systemImage: "pencil.circle")
        }
    } label: {
        Image(systemName: "ellipsis.circle")
    }
} else if #available(macOS 10.15, *) {
    MenuButton(
        label: Image(nsImage: NSImage(named: NSImage.actionTemplateName)!),
        content: {
            Button(action: {}) {
                HStack {
                    Image(nsImage: NSImage(named: NSImage.addTemplateName)!)
                    Text("Add")
                }
            }
            Button(action: {}) {
                HStack {
                    Image(nsImage: NSImage(named: NSImage.removeTemplateName)!)
                    Text("Delete")
                }
            }
            Button(action: {}) {
                HStack {
                    Image(nsImage: NSImage(named: NSImage.refreshTemplateName)!)
                    Text("Edit")
                }
            }
        })
        .menuButtonStyle(BorderlessButtonMenuButtonStyle())
} else {
    // Custom code here would be needed to support iOS 13 and MacOS 10.14
}

Upvotes: 2

stevex
stevex

Reputation: 5819

You can use MenuButton with a menuButtonStyle to create a button which, when clicked, shows a menu. Seems to be Mac only currently.

MenuButton("Menu") {
    Button(action: {
      print("Clicked an item")
    }) {
        Text("Menu Item Text")                
    }
}.menuButtonStyle(BorderlessButtonMenuButtonStyle())

Upvotes: 7

Related Questions