Vaibhav Dwivedi
Posted on October 25, 2024
Day 14: Enhancing Interactions with Context ⚙️
Welcome back to the #30DaysOfSwift series!
Today, let's look at Context Menus. A powerful way to offer additional actions when users long-press or right-click on UI elements.
By integrating context menus into your SwiftUI app, you can create a smooth, intuitive experience for users when interacting with different elements.
What are Context Menus?
- Context Menus provide additional actions that a user can perform on an element.
- They are revealed via a long press or right-click, making it easy for users to access additional options without cluttering the UI.
Code Example: Context Menus in Action
struct ContextMenuExample: View {
@State private var favorite: Bool = false
var body: some View {
VStack {
HStack {
Text("Long-press me!")
.font(.title2)
.padding()
Spacer()
if favorite {
Image(systemName: "heart.fill")
.foregroundColor(.red) // Customization: Heart icon if marked as favorite
}
}
.frame(maxWidth: .infinity)
.padding()
.background(Color.blue.opacity(0.2)) // Custom background color
.cornerRadius(10) // Rounded corners for aesthetic touch
.contextMenu { // Adding the context menu
Button(action: {
favorite.toggle()
}) {
Label("Favorite", systemImage: favorite ? "heart.fill" : "heart")
}
Button(action: {
print("Shared!")
}) {
Label("Share", systemImage: "square.and.arrow.up")
}
Button(action: {
print("Deleted!")
}) {
Label("Delete", systemImage: "trash")
.foregroundColor(.red) // Custom color for danger actions
}
}
}
.padding()
}
}
Now it's your turn! Try adding context menus to elements in your app to make your interactions more intuitive and user-friendly!
The full series is available on my profile and the components can also be found at shipios.app/components.
Happy Coding! 🎨
Posted on October 25, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
