-
-
Notifications
You must be signed in to change notification settings - Fork 93
Description
Problem Description
Currently, MijickPopups only supports three fixed positions: TopPopup, CenterPopup, and BottomPopup. However, there are common UI patterns that require positioning a popup relative to a specific anchor view (e.g., showing a dropdown menu below a toolbar button with an arrow pointing to it).
Use Case
I have a toolbar with a bookmark button. When tapped, a navigation panel should appear:
- Anchored below the button
- With an arrow pointing to the button
- Positioned at a specific screen location (e.g., left edge of the screen, below the toolbar)
This is a very common pattern in productivity apps (like Notes, Files, PDF readers).
Current Solution
I'm currently using Popovers library for this:
.popover(
present: $isVisible,
attributes: {
$0.position = .absolute(
originAnchor: .bottomLeft,
popoverAnchor: .topLeft
)
$0.sourceFrameInset.bottom = -offsetY
$0.sourceFrameInset.left = offsetX
}
) {
MyPopupContent()
}However, I prefer MijickPopups for its cleaner API, better animations, and bottom sheet support. It would be great to consolidate into one library.
Proposed API
struct MyDropdown: AnchoredPopup {
var body: some View {
// Popup content
}
func configurePopup(config: AnchoredPopupConfig) -> AnchoredPopupConfig {
config
.originAnchor(.bottomLeft) // Anchor point on the source view
.popupAnchor(.topLeft) // Anchor point on the popup
.offset(x: 0, y: 8) // Additional offset
.showArrow(true) // Optional arrow pointing to source
.arrowDirection(.up)
}
}
// Usage
Button("Bookmark") {
Task { await MyDropdown().present(anchoredTo: buttonFrame) }
}Additional Consideration: Responsive Fallback
It would be even better if the popup could automatically fall back to BottomPopup style on compact screens (iPhone), similar to how native SwiftUI .popover() becomes a sheet on iPhone:
func configurePopup(config: AnchoredPopupConfig) -> AnchoredPopupConfig {
config
.originAnchor(.bottomLeft)
.popupAnchor(.topLeft)
.compactFallback(.bottom) // On iPhone, show as bottom sheet instead
}Benefits
- Complete popup solution - One library for all positioning needs
- Common UI pattern - Dropdown menus, toolbar popovers, context menus
- Consistent experience - Same animation system and API style
Environment
- MijickPopups version: 4.0.5
- iOS: 16.0+
- Platforms: iPhone, iPad, Mac Catalyst
Thank you for considering this feature!