Ant Design Blazor
Dropdown下拉菜单
向下弹出的列表。
何时使用
当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。
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
最简单的下拉菜单。
分割线和不可用菜单项。
设置 ArrowPointAtCenter 为 true 后，箭头将指向目标元素的中心。
点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。
传入的菜单里有多个层级。
默认是移入触发菜单，可以点击鼠标右键触发。(目前只有NET5完整支持)
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.
Dropdown API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Arrow | 属性下拉箭头是否可见。 | Boolean | false |
| ArrowPointAtCenter | 属性下拉箭头是否应指向中心 | Boolean | false |
| BoundaryAdjustMode | 属性覆盖调整策略（例如，当浏览器调整大小时发生）。检查枚举以获取详细信息。 | TriggerBoundaryAdjustMode | TriggerBoundaryAdjustMode.InView |
| ChildContent | 属性触发器（链接、按钮等） | RenderFragment | -- |
| ComplexAutoCloseAndVisible | 属性是否需要自动关闭和可见控件关闭。 | Boolean | false |
| Disabled | 属性触发器是否被禁用。 | Boolean | false |
| HiddenMode | 属性属性转发到 Overlay 组件。查阅 Overlay 属性以获得更详细的解释。 | Boolean | false |
| InlineFlexMode | 属性（未在 Unbound 中使用）将包装 div 样式设置为 `display: inline-flex;`。 | Boolean | false |
| IsButton | 属性表现得像一个按钮：单击时调用 OnClick（除非 OnClickDiv 被覆盖并且不调用 base）。 | Boolean | false |
| OnClick | 属性单击触发器时的回调 | EventCallback<MouseEventArgs> | -- |
| OnMaskClick | 属性回调 - 相当于触发触发器上的 OnMouseUp 事件。 | EventCallback | -- |
| OnMouseEnter | 属性鼠标进入触发边界时回调。 | EventCallback | -- |
| OnMouseLeave | 属性鼠标离开触发边界时回调。 | EventCallback | -- |
| OnOverlayHiding | 属性overlay 隐藏时的回调。 | EventCallback<Boolean> | -- |
| OnVisibleChange | 属性叠加层可见性发生变化时的回调。请改用 VisibleChanged Obsolete 将在未来的版本中删除。 |
EventCallback<Boolean> | -- |
| Overlay | 属性覆盖内容（激活触发器后将呈现的内容） | RenderFragment | -- |
| OverlayClassName | 属性覆盖容器自定义 css 类。 | String | -- |
| OverlayEnterCls | 属性显示覆盖时添加到覆盖的 Css 类。 | String | -- |
| OverlayHiddenCls | 属性覆盖层隐藏时添加到覆盖层的 Css 类。 | String | -- |
| OverlayLeaveCls | 属性覆盖隐藏时添加到覆盖的 Css 类。 | String | -- |
| OverlayStyle | 属性将添加到覆盖 div 的 Css 样式。 | String | -- |
| Placement | 属性下拉叠加层相对于目标的位置。可以是：上、左、右、下、左上、右上、左下、右下、左上、左下、右上、右下 | Placement | PlacementType.BottomLeft |
| PlacementCls | 属性覆盖基于“Placement”参数的默认放置类。 | String | -- |
| PopupContainerSelector | 属性定义什么将成为叠加层的容器。示例用例：当覆盖必须包含在可滚动区域中时。 | String | body |
| Trigger | 属性触发模式。通过传递数组可以是多个。 | Trigger[] | TriggerType.Hover |
| TriggerCls | 属性触发器元素 CSS 类。 | String | ant-dropdown-trigger |
| TriggerReference | 属性手动设置对触发元素的引用。 | ElementReference | -- |
| Unbound | 属性设置了 ElementReference 的 ChildElement 以避免包装 div。 | RenderFragment<ForwardRef> | -- |
| Visible | 属性切换覆盖可行性。 | Boolean | false |
| VisibleChanged | 属性可见性更改时的回调。 | EventCallback<Boolean> | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
| 方法签名 | 返回类型 | 描述 |
|---|---|---|
| Close() | Task | 将隐藏叠加层。 |
| IsOverlayShow() | Boolean | 检查叠加层当前是否处于可见状态。 |
| SetVisible(Boolean visible) | void | 切换叠加可见性。 |
DropdownButton API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Block | 属性使按钮宽度适合其父宽度的选项 | Boolean | -- |
| ButtonsRender | 属性完全可定制的按钮。 | Func<RenderFragment, RenderFragment, RenderFragment> | -- |
| ButtonsClass | 属性允许将每个按钮的 css 类设置为相同的字符串或单独设置。 | OneOf<String, ValueTuple<String, String>> | -- |
| ButtonsStyle | 属性允许将每个按钮的样式设置为相同的字符串或单独设置。 | OneOf<String, ValueTuple<String, String>> | -- |
| Danger | 属性设置按钮的危险状态 | Boolean | false |
| Ghost | 属性用于背景复杂的场合，一般用于首页。 | Boolean | false |
| Icon | 属性将在右侧按钮中呈现的图标。 | String | ellipsis |
| Loading | 属性指示是否要包含加载图标。如果设置为 true，则下拉列表将不会处于活动状态。 | Boolean | false |
| Size | 属性按钮大小。 | String | AntSizeLDSType.Default |
| Type | 属性允许将每个按钮的类型设置为相同的字符串或单独设置。使用 AntDesign.ButtonType 辅助类。 | OneOf<String, ValueTuple<String, String>> | ButtonType.Default |
| Arrow | 属性下拉箭头是否可见。 | Boolean | false |
| ArrowPointAtCenter | 属性下拉箭头是否应指向中心 | Boolean | false |
| BoundaryAdjustMode | 属性覆盖调整策略（例如，当浏览器调整大小时发生）。检查枚举以获取详细信息。 | TriggerBoundaryAdjustMode | TriggerBoundaryAdjustMode.InView |
| ChildContent | 属性触发器（链接、按钮等） | RenderFragment | -- |
| ComplexAutoCloseAndVisible | 属性是否需要自动关闭和可见控件关闭。 | Boolean | false |
| Disabled | 属性触发器是否被禁用。 | Boolean | false |
| HiddenMode | 属性属性转发到 Overlay 组件。查阅 Overlay 属性以获得更详细的解释。 | Boolean | false |
| InlineFlexMode | 属性（未在 Unbound 中使用）将包装 div 样式设置为 `display: inline-flex;`。 | Boolean | false |
| IsButton | 属性表现得像一个按钮：单击时调用 OnClick（除非 OnClickDiv 被覆盖并且不调用 base）。 | Boolean | false |
| OnClick | 属性单击触发器时的回调 | EventCallback<MouseEventArgs> | -- |
| OnMaskClick | 属性回调 - 相当于触发触发器上的 OnMouseUp 事件。 | EventCallback | -- |
| OnMouseEnter | 属性鼠标进入触发边界时回调。 | EventCallback | -- |
| OnMouseLeave | 属性鼠标离开触发边界时回调。 | EventCallback | -- |
| OnOverlayHiding | 属性overlay 隐藏时的回调。 | EventCallback<Boolean> | -- |
| OnVisibleChange | 属性叠加层可见性发生变化时的回调。请改用 VisibleChanged Obsolete 将在未来的版本中删除。 |
EventCallback<Boolean> | -- |
| Overlay | 属性覆盖内容（激活触发器后将呈现的内容） | RenderFragment | -- |
| OverlayClassName | 属性覆盖容器自定义 css 类。 | String | -- |
| OverlayEnterCls | 属性显示覆盖时添加到覆盖的 Css 类。 | String | -- |
| OverlayHiddenCls | 属性覆盖层隐藏时添加到覆盖层的 Css 类。 | String | -- |
| OverlayLeaveCls | 属性覆盖隐藏时添加到覆盖的 Css 类。 | String | -- |
| OverlayStyle | 属性将添加到覆盖 div 的 Css 样式。 | String | -- |
| Placement | 属性下拉叠加层相对于目标的位置。可以是：上、左、右、下、左上、右上、左下、右下、左上、左下、右上、右下 | Placement | PlacementType.BottomLeft |
| PlacementCls | 属性覆盖基于“Placement”参数的默认放置类。 | String | -- |
| PopupContainerSelector | 属性定义什么将成为叠加层的容器。示例用例：当覆盖必须包含在可滚动区域中时。 | String | body |
| Trigger | 属性触发模式。通过传递数组可以是多个。 | Trigger[] | TriggerType.Hover |
| TriggerCls | 属性触发器元素 CSS 类。 | String | ant-dropdown-trigger |
| TriggerReference | 属性手动设置对触发元素的引用。 | ElementReference | -- |
| Unbound | 属性设置了 ElementReference 的 ChildElement 以避免包装 div。 | RenderFragment<ForwardRef> | -- |
| Visible | 属性切换覆盖可行性。 | Boolean | false |
| VisibleChanged | 属性可见性更改时的回调。 | EventCallback<Boolean> | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
| 方法签名 | 返回类型 | 描述 |
|---|---|---|
| Close() | Task | 将隐藏叠加层。 |
| IsOverlayShow() | Boolean | 检查叠加层当前是否处于可见状态。 |
| SetVisible(Boolean visible) | void | 切换叠加可见性。 |