Popover气泡卡片
点击/鼠标移入元素,弹出气泡式的卡片浮层。
何时使用
当目标元素有进一步的描述和相关操作时,可以收纳到卡片中,根据用户的操作行为进行展现。
和 Tooltip 的区别是,用户可以对浮层上的元素进行操作,因此它可以承载更复杂的内容,比如链接或按钮等。
Examples
Popover API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Title | 属性卡片的标题字符串 | String | -- |
| TitleTemplate | 属性卡片的标题内容。优先于 AntDesign.Popover.Title |
RenderFragment | -- |
| Content | 属性卡片内容字符串 | String | -- |
| ContentTemplate | 属性名片内容。优先于 AntDesign.Popover.Content |
RenderFragment | -- |
| ArrowPointAtCenter | 属性是否将箭头指向被包裹元素的中心 | Boolean | false |
| MouseEnterDelay | 属性以秒为单位的延迟,在鼠标输入时显示工具提示之前 | Double | 0.1 |
| MouseLeaveDelay | 属性以秒为单位的延迟,在鼠标离开时隐藏工具提示之前 | Double | 0.1 |
| 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 | 检查叠加层当前是否处于可见状态。 |