logo
为了能更好地了解您的商业使用需求,请参与 Ant Design Blazor 商业应用调查,一起建设商业应用社区,为企业系统研发赋能!

Popover气泡卡片

点击/鼠标移入元素,弹出气泡式的卡片浮层。

何时使用

当目标元素有进一步的描述和相关操作时,可以收纳到卡片中,根据用户的操作行为进行展现。

Tooltip 的区别是,用户可以对浮层上的元素进行操作,因此它可以承载更复杂的内容,比如链接或按钮等。

Examples

最简单的用法,浮层的大小由内容区域决定。

expand code expand code

位置有十二个方向。

expand code expand code

设置了 arrowPointAtCenter 后,箭头将指向目标元素的中心。

expand code expand code

鼠标移入、聚集、点击。

expand code expand code

使用 visible 属性控制浮层显示。

expand code expand code

以下示例显示如何创建可悬停和单击的弹出窗口。

expand code expand code

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 检查叠加层当前是否处于可见状态。
SetVisible(Boolean visible) void 切换叠加可见性。
List列表 Segmented分段控制器
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.