Ant Design Blazor
Dropdown
A dropdown list.
When To Use
When there are more than a few options to choose from, you can wrap them in a Dropdown. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action.
Two types
There are 2 rendering approaches for Dropdown:
- Wraps child element (content of the
Dropdown) with a<div>(default approach). - Child element is not wrapped with anything. This approach requires usage of
<Unbound>tag inside<Dropdown>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 dropdown menu of both types.
Divider and disabled menu item.
By specifying ArrowPointAtCenter prop with true, the arrow will point to the center of the target element.
An event will be triggered when you click menu items, in which you can make different operations according to item's key.
The menu has multiple levels.
The default trigger mode is hover, you can change it to contextMenu.(Full supported in NET5 right now)
Use enum TriggerBoundaryAdjustMode to choose pop-up repositioning strategy if the dropdown does not fit in the visible area. There are 3 available strategies:
- None - Do not reposition.
- InView - Attempt to fit the overlay so it is always fully visible in the viewport. So if the overlay is outside of the viewport ("overflows"), then reposition calculation is going to be attempted.
- InScroll - The document boundaries are the boundaries used for calculation if overlay needs to be reposition. So even if the overlay is outside of the viewport, the overlay may still be shown as long as it does not "overflow" the document boundaries.
Support 6 placements.
You could display an arrow.
The default trigger mode is hover, you can change it to click.
A button is on the left, and a related functional menu is on the right. You can set the icon property to modify the icon of right.
The default is to close the menu when you click on menu items, this feature can be turned off.
Fix popup container.
Dropdown API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Arrow | ParameterWhether the dropdown arrow should be visible. | Boolean | false |
| ArrowPointAtCenter | ParameterWhether the dropdown arrow should point at center | Boolean | false |
| 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. |
DropdownButton API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Block | ParameterOption to fit button width to its parent width | Boolean | -- |
| ButtonsRender | ParameterFully customizable button. | Func<RenderFragment, RenderFragment, RenderFragment> | -- |
| ButtonsClass | ParameterAllows to set each button's css class either to the same string or separately. | OneOf<String, ValueTuple<String, String>> | -- |
| ButtonsStyle | ParameterAllows to set each button's style either to the same string or separately. | OneOf<String, ValueTuple<String, String>> | -- |
| Danger | ParameterSet the danger status of button | Boolean | false |
| Ghost | ParameterUsed in situations with complex background, home pages usually. | Boolean | false |
| Icon | ParameterIcon that will be rendered in the right button. | String | ellipsis |
| Loading | ParameterIndicates if loading icon is going to be included. If set to true, then dropdown will not be active. | Boolean | false |
| Size | ParameterButton size. | String | AntSizeLDSType.Default |
| Type | ParameterAllows to set each button's type either to the same string or separately. Use AntDesign.ButtonType helper class. | OneOf<String, ValueTuple<String, String>> | ButtonType.Default |
| Arrow | ParameterWhether the dropdown arrow should be visible. | Boolean | false |
| ArrowPointAtCenter | ParameterWhether the dropdown arrow should point at center | Boolean | false |
| 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. |