`Popover`

一个适用于 ReactLynx 的无样式气泡浮层组件，提供定位和锚点追踪基础能力。

基础用法

额外锚点

如果您想添加额外的锚点，可以使用 PopoverAnchor 组件。

交叉轴偏移调整

在 PopoverPositioner 上使用 crossAxisOffset 来设置浮动元素的交叉轴偏移量。

结构

<PopoverRoot>
  <PopoverTrigger />
  <PopoverAnchor>
    <PopoverPositioner>
      <PopoverContent />
      <PopoverArrow />
    </PopoverPositioner>
  </PopoverAnchor>
</PopoverRoot>

API

PopoverRoot

The root component of the Popover, containing all of its child components.

children

iOS

Android

Harmony

类型ReactNode

子元素

className

iOS

Android

Harmony

类型string

类名

debugLog

iOS

Android

Harmony

类型boolean

开启 Popover 及其子组件的调试日志。

defaultShow

iOS

Android

Harmony

类型boolean

确定对话框是否默认显示。使用此属性意味着对话框是非受控的。

forceMount

iOS

Android

Harmony

类型boolean·默认值false

即使弹窗未显示，也会挂载弹窗并渲染内容。此时内部状态处于 closed

onClose

iOS

Android

Harmony

类型() => void

当 Popover 关闭时触发

onOpen

iOS

Android

Harmony

类型() => void

当 Popover 显示时触发

onVisibleChange

iOS

Android

Harmony

类型(visible: boolean) => void

Popover 显示状态改变时触发的回调，仅在受控模式下被调用。

show

iOS

Android

Harmony

类型boolean

确定是否应显示对话框。使用此属性意味着对话框是受控的。请勿与 'defaultShow' 属性一起使用。

style

iOS

Android

Harmony

类型CSSProperties

样式

PopoverTrigger

The element that triggers the Popover to show.

children

iOS

Android

Harmony

类型ReactNode

子元素

className

iOS

Android

Harmony

类型string

类名

disabled

类型boolean

禁用此触发器

onClick

iOS

Android

Harmony

类型() => void

组件被点击时触发的回调函数

style

iOS

Android

Harmony

类型CSSProperties

样式

transition

iOS

Android

Harmony

类型boolean

如果设置为 true，则 className 会包含 'ui-entering', 'ui-leaving', 'ui-animating' 等动画相关类名

PopoverPositioner

Helps position the Content and Arrow correctly.

autoAdjust

iOS

Android

Harmony

类型size | shift

Popover 的自动调整策略。默认为 'size'，会根据 Popover 大小自动调整 maxHeight/maxWidth；'shift' 会根据 Popover 的宽度/高度自动调整位置。

className

iOS

Android

Harmony

类型string

类名

crossAxisOffset

iOS

Android

Harmony

类型number

额外的 crossAxis 偏移量。如果设置了此属性，Popover 会在 crossAxis 方向上额外偏移指定的量。

placement

iOS

Android

Harmony

类型Placement

Popover 的位置

placementOffset

iOS

Android

Harmony

类型number

Popover 位置的偏移量

popoverPositionerProps

iOS

Android

Harmony

类型ViewProps | OverlayProps

popoverPositioner 支持将原始 view 或 overlay 属性直接展开到这个属性中。

style

iOS

Android

Harmony

类型CSSProperties

样式

transition

iOS

Android

Harmony

类型boolean

如果设置为 true，则 className 会包含 'ui-entering', 'ui-leaving', 'ui-animating' 等动画相关类名

children

iOS

Android

Harmony

类型

ReactNode | (status: {open?: boolean, closed?: boolean, leaving?: boolean, entering?: boolean, animating?: boolean}) => ReactNode

子元素

基于状态的样式与渲染

该组件将每一项内部状态通过两条等价通道同时对外暴露，下表逐行给出两者的对应关系：

CSS className：根节点上会动态加上 ui-<state> 形式的类名，可直接用 .ui-<state> { ... } 选择器定制样式；
Render-prop 字段：当 children 传入函数时，同一个状态会以 children({ <state>: boolean, ... }) 的形式作为参数传入，便于在运行时做条件渲染。

ui-open

Render Propopen·类型boolean

弹层处于打开状态。当 status.open 为 true 时生效，可用于 `.ui-open { ... }`。

ui-closed

Render Propclosed·类型boolean

弹层处于关闭状态。如果开启了 forceMount，初始状态会是 ui-closed。当 status.closed 为 true 时生效，可用于 `.ui-closed { ... }`。

ui-leaving

Render Propleaving·类型boolean

弹层正在执行离开动画。仅在 transition:true 时生效。当 status.leaving 为 true 时生效，可用于 `.ui-leaving { ... }`。

ui-entering

Render Propentering·类型boolean

弹层正在执行进入动画。仅在 transition:true 时生效。当 status.entering 为 true 时生效，可用于 `.ui-entering { ... }`。

ui-animating

Render Propanimating·类型boolean

弹层正在执行动画。仅在 transition:true 时生效。当 status.animating 为 true 时生效，可用于 `.ui-animating { ... }`。

PopoverContent

The content of the Popover.

children

iOS

Android

Harmony

类型ReactNode

子元素

className

iOS

Android

Harmony

类型string

类名

popoverContentProps

iOS

Android

Harmony

类型ViewProps

PopoverContent 支持将原始 view 属性直接展开到这个属性中。

style

iOS

Android

Harmony

类型CSSProperties

样式

transition

iOS

Android

Harmony

类型boolean

如果设置为 true，则 className 会包含 'ui-entering', 'ui-leaving', 'ui-animating' 等动画相关类名

PopoverArrow

The arrow of the Popover.

children

iOS

Android

Harmony

类型ReactNode

子元素。仅当你不想使用默认箭头时才使用它。注意，当设置此属性时，size 和 color 等属性将被忽略，默认的 transform 也会不同。

className

iOS

Android

Harmony

类型string

类名

color

iOS

Android

Harmony

类型string·默认值'black'

箭头的颜色。默认为 'black'

offset

iOS

Android

Harmony

类型number·默认值0

箭头的偏移量。当 PopoverContent 有圆角时，应将其设置为圆角的半径。否则，箭头可能会放置在圆角旁边，导致两者之间出现间隙。

size

iOS

Android

Harmony

类型number | [object Object]

箭头尺寸。支持 number（宽高一致）或 { width, height }（宽高不一致）。使用自定义子节点时，需要确保 size 与子节点的视觉尺寸一致。

style

iOS

Android

Harmony

类型CSSProperties

样式

transition

iOS

Android

Harmony

类型boolean

如果设置为 true，则 className 会包含 'ui-entering', 'ui-leaving', 'ui-animating' 等动画相关类名

#Popover

#基础用法

#额外锚点

#交叉轴偏移调整

#结构

#API

#PopoverRoot

#PopoverTrigger

#PopoverPositioner

基于状态的样式与渲染

#PopoverContent

#PopoverArrow

`Popover`

基础用法

额外锚点

交叉轴偏移调整

结构

API

PopoverRoot

PopoverTrigger

PopoverPositioner

PopoverContent

PopoverArrow