Popup

Basic usage

Popup component declares a popup that you can open via its api, it can be configured by setting the

Opt

parameter:

<OPopup @ref="popup1" Opt="@(new(){ Modal = true, Title = "My Modal Popup", OutClickClose = true })">
    <div style="min-width: 30vw; padding: 1em;">
        Modal popup content
    </div>
</OPopup>
<OButton OnClick="() => popup1.Open()">Open popup</OButton>
...
private OPopup popup1;

Dropdown popup

The popup can also be opened as a dropdown, the opener should be specified when calling open so that it will know from where to drop:

<OPopup @ref="popup2" Opt="@(new(){ Dropdown = true })">
    Dropdown popup content
</OPopup>
<div @ref="dbtn">
    <OButton OnClick="() => popup2.Open(new(){Opener = dbtn})">Open dropdown</OButton>
</div>
...
private OPopup popup2;
private ElementReference dbtn;

PopupOpt

PopupOpt config model

AutoOpen	Open popup on init
Dropdown	Is the popup a dropdown
Menu	Use Menu popup inner html (like the DropdownList for example)
Modal	Is the popup a modal
NoCloseFocus	Don't focus opener on close
NoFocus	Don't focus first tabbale on open
OnCloseFunc	Function to execute on popup close
OnOpenFunc	Function to execute on popup open
OutClickClose	Close the popup when clicking outside of it (defaults to true when Dropdown is true)
PopupClass	Css class for the popup div
Title	Popup title, rendered in the popup header