Popover / 气泡卡片

通过点击或鼠标移入触发的气泡风格弹出层。

基础的

基础示例。

预置子选项

使用预置的 Item 组件完成弹出内容的布局。

手动关闭

你可以控制何时手动地关闭弹出卡片。

APIs / 接口文档

Popover.Props

属性描述类型推荐值默认
content气泡卡片内容ReactNode () => ReactNode--
visible手动控制气泡的显示与隐藏boolean-false
initialVisible初始是否可见boolean-false
hideArrow隐藏箭头boolean-false
placement气泡卡片与目标的对齐方式Placement-bottom
trigger触发气泡卡片的方式'click' / 'hover'-click
enterDelay(ms)在提示显示前的延迟number-100
leaveDelay(ms)关闭提示前的延迟number-0
offset(px)提示框与目标之间的偏移number-12
portalClassName气泡卡片的类名string--
onVisibleChange当气泡卡片状态改变时触发(visible: boolean) => void--
disableItemsAutoClose当 Item 被点击时阻止气泡关闭boolean-false
...原生属性HTMLAttributes'id', ...-

Popover.Item[别名: Popover.Option]

属性描述类型推荐值默认
line显示线条boolean-false
title用标题的样式展示文字boolean-false
disableAutoClose触发点击事件时也不要关闭气泡boolean-false

Placement

type Placement = 'top'
  | 'topStart',
  | 'topEnd',
  | 'left',
  | 'leftStart',
  | 'leftEnd',
  | 'bottom',
  | 'bottomStart',
  | 'bottomEnd',
  | 'right',
  | 'rightStart',
  | 'rightEnd',
Add