WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Feature Request: Absolute Positioning Support (anchor to specific view/coordinates) #197

@videni

Description

@videni

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

  1. Complete popup solution - One library for all positioning needs
  2. Common UI pattern - Dropdown menus, toolbar popovers, context menus
  3. 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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions