For more examples, visit the Storybook.

Example
<StudsButton @ref="button" Text="Open Popup" Click="HandleButtonClick" />
<StudsPopup @ref="popup">
    This is a popup. It can contain any content you want.
</StudsPopup>

@code {
    private StudsButton button;
    private StudsPopup popup;

    private async Task HandleButtonClick(MouseEventArgs args)
    {
        if (button != null && popup != null)
        {
            await popup.ToggleAsync(button.Element);
        }
    }
}

​
StudsPopup Parameters

​
Lazy
bool
default:"false"

If true, the popup content will only be rendered when the popup is open.

​
AutoFocusFirstElement
bool
default:"true"

Gets or sets a value indicating whether to focus the first focusable HTML element when the popup opens.

​
ChildContent
RenderFragment

Gets or sets the content to be displayed inside the popup.

​
PreventDefault
bool
default:"false"

If true, prevents the default mouse down behavior on the popup element.

​
Open
EventCallback

Gets or sets the callback that is invoked when the popup is opened.

​
Close
EventCallback

Gets or sets the callback that is invoked when the popup is closed.

​
Methods

​
ToggleAsync(ElementReference target, bool disableSmartPosition = false)
Task

Opens or closes the popup relative to the target element. The disableSmartPosition parameter controls whether the popup should use smart positioning.

​
CloseAsync()
Task

Closes the popup.

​
CloseAsync(ElementReference target)
Task

Closes the popup associated with the specified target element.

​
Attributes
Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

​
MouseEnter
EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

​
MouseLeave
EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

​
ContextMenu
EventCallback<MouseEventArgs>

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

​
Culture
CultureInfo
default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

​
Style
string

Gets or sets the inline CSS style.

​
Visible
bool
default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.