Ant Design Blazor
Popover
The floating card popped by clicking or hovering.
When To Use
A simple popup menu to provide extra information or operations.
Comparing with Tooltip, besides information Popover card can also provide action elements like links and buttons.
Two types
There are 2 rendering approaches for Popover:
- Wraps child element (content of the
Popover) with a<div>(default approach). - Child element is not wrapped with anything. This approach requires usage of
<Unbound>tag inside<Popover>and depending on the child element type (please refer to the first example):- html tag: has to have its
@refset to@context.Current Ant Design Blazorcomponent: has to have itsRefBackattribute set to@context.
- html tag: has to have its
Examples
The most basic example of both types of the Popover. The size of the floating layer depends on the contents region.
There are 12 placement options available.
The arrow points to the center of the target element, which set arrowPointAtCenter.
Mouse to click, focus and move in.
Use visible prop to control the display of the card.
The following example shows how to create a popover which can be hovered and clicked.
Popover API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Title | ParameterTitle string of the card | String | -- |
| TitleTemplate | ParameterTitle content of the card. Takes priority over AntDesign.Popover.Title |
RenderFragment | -- |
| Content | ParameterContent string of the card | String | -- |
| ContentTemplate | ParameterContent of the card. Takes priority over AntDesign.Popover.Content |
RenderFragment | -- |
| ArrowPointAtCenter | ParameterPoint the arrow at the center of the wrapped element or not | Boolean | false |
| MouseEnterDelay | ParameterDelay in seconds, before tooltip is shown on mouse enter | Double | 0.1 |
| MouseLeaveDelay | ParameterDelay in seconds, before tooltip is hidden on mouse leave | Double | 0.1 |
| BoundaryAdjustMode | ParameterOverlay adjustment strategy (when for example browser resize is happening). Check enum for details. | TriggerBoundaryAdjustMode | TriggerBoundaryAdjustMode.InView |
| ChildContent | ParameterTrigger (link, button, etc) | RenderFragment | -- |
| ComplexAutoCloseAndVisible | ParameterWhether need both auto-off and Visible control closing. | Boolean | false |
| Disabled | ParameterWhether the trigger is disabled. | Boolean | false |
| HiddenMode | ParameterProperty forwarded to Overlay component. Consult the Overlay property for more detailed explanation. | Boolean | false |
| InlineFlexMode | Parameter(not used in Unbound) Sets wrapping div style to `display: inline-flex;`. | Boolean | false |
| IsButton | ParameterBehave like a button: when clicked invoke OnClick (unless OnClickDiv is overriden and does not call base). | Boolean | false |
| OnClick | ParameterCallback when triggger is clicked | EventCallback<MouseEventArgs> | -- |
| OnMaskClick | ParameterCallback - equivalent of OnMouseUp event on the trigger trigger. | EventCallback | -- |
| OnMouseEnter | ParameterCallback when mouse enters trigger boundaries. | EventCallback | -- |
| OnMouseLeave | ParameterCallback when mouse leaves trigger boundaries. | EventCallback | -- |
| OnOverlayHiding | ParameterCallback when overlay is hiding. | EventCallback<Boolean> | -- |
| OnVisibleChange | ParameterCallback when overlay visibility is changing.Use VisibleChanged instead Obsolete Will be removed in a future version. |
EventCallback<Boolean> | -- |
| Overlay | ParameterOverlay content (what will be rendered after trigger is activated) | RenderFragment | -- |
| OverlayClassName | ParameterOverlay container custom css class. | String | -- |
| OverlayEnterCls | ParameterCss class added to overlay when overlay is shown. | String | -- |
| OverlayHiddenCls | ParameterCss class added to overlay when overlay is hidden. | String | -- |
| OverlayLeaveCls | ParameterCss class added to overlay when overlay is hiding. | String | -- |
| OverlayStyle | ParameterCss style that will be added to overlay div. | String | -- |
| Placement | ParameterThe position of the Dropdown overlay relative to the target. Can be: Top, Left, Right, Bottom, TopLeft, TopRight, BottomLeft, BottomRight, LeftTop, LeftBottom, RightTop, RightBottom | Placement | PlacementType.BottomLeft |
| PlacementCls | ParameterOverride default placement class which is based on `Placement` parameter. | String | -- |
| PopupContainerSelector | ParameterDefine what is going to be the container of the overlay. Example use case: when overlay has to be contained in a scrollable area. | String | body |
| Trigger | ParameterTrigger mode. Could be multiple by passing an array. | Trigger[] | TriggerType.Hover |
| TriggerCls | ParameterThe trigger element CSS class. | String | ant-dropdown-trigger |
| TriggerReference | ParameterManually set reference to triggering element. | ElementReference | -- |
| Unbound | ParameterChildElement with ElementReference set to avoid wrapping div. | RenderFragment<ForwardRef> | -- |
| Visible | ParameterToggles overlay viability. | Boolean | false |
| VisibleChanged | ParameterCallback when visibility is changed. | EventCallback<Boolean> | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
| Method Signature | Return Type | Description |
|---|---|---|
| Close() | Task | Will hide the overlay. |
| IsOverlayShow() | Boolean | Checks if overlay is currently in visible state. |
| SetVisible(Boolean visible) | void | Toggle overlay visibility. |