`Dialog`

一个适用于 ReactLynx 的无样式对话框组件，提供遮罩渲染、开关状态管理以及进出场动画基础能力。

弹窗组件，可以设置背景遮罩层。

基础用法

结构

<DialogRoot>
  <DialogView>
    <DialogBackdrop />
    <DialogContent />
  </DialogView>
</DialogRoot>

API

DialogRoot

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

debugLog

iOS

Android

Harmony

类型boolean

显示调试日志。发现 bug 时开启。

defaultShow

iOS

Android

Harmony

类型boolean·默认值false

确定弹窗是否默认显示。使用此属性意味着弹窗处于非受控模式。

forceMount

iOS

Android

Harmony

类型boolean·默认值false

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

onClose

iOS

Android

Harmony

类型() => void

当弹出框实际关闭且可能的动画结束时触发。

onOpen

iOS

Android

Harmony

类型() => void

当弹出框实际显示且可能的动画结束时触发。

onShowChange

iOS

Android

Harmony

类型(open: boolean) => void

当弹窗即将关闭时触发，可通过点击背景或关闭按钮触发。在受控模式下（提供了 show 属性），您应该使用此处理器来更新控制弹窗可见性的状态。在非受控模式下，此处理器是可选的，会在弹窗内部状态更新之前调用。

show

iOS

Android

Harmony

类型boolean

是否显示弹出框。如果未设置此属性，弹出框将处于受控模式，这意味着 defaultShow 属性将无效。并且你必须控制点击关闭按钮和背景的行为。

children

iOS

Android

Harmony

类型

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

子元素

基于状态的样式与渲染

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

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

ui-animating

Render Propanimating·类型boolean

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

ui-closed

Render Propclosed·类型boolean

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

ui-entering

Render Propentering·类型boolean

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

ui-leaving

Render Propleaving·类型boolean

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

ui-open

Render Propopen·类型boolean

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

DialogBackdrop

The backdrop mask of the dialog.

children

iOS

Android

Harmony

类型ReactNode

子元素

className

iOS

Android

Harmony

类型string

类名

clickToClose

iOS

Android

Harmony

类型boolean·默认值true

确定点击背景是否关闭弹窗。此属性作为背景点击事件的行为开关。当值为 true 时，如果弹窗处于非受控模式（未提供 show 属性），点击背景将触发 onClose 回调并关闭弹窗。当值为 false 时，点击背景将没有任何效果。

delayed

类型boolean

如果内容需要延迟首屏进行首次渲染，则需要将此属性设置为 true。

dialogBackdropProps

iOS

Android

Harmony

类型ViewProps

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

onClick

iOS

Android

Harmony

类型() => void

点击背景时触发。

style

iOS

Android

Harmony

类型CSSProperties

样式

transition

iOS

Android

Harmony

类型boolean

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

DialogView

View container. When 'container' is set correctly, the underlying layer will be replaced with overlay; otherwise, it will be a regular view. When the underlying layer is overlay, the 'level' property can be used to control the hierarchical relationship. For a regular view, use 'z-index' to control the hierarchical relationship. If this dialog needs to be used outside of LynxView, consider enabling overlay.

className

iOS

Android

Harmony

类型string

类名

container

iOS

Android

Harmony

类型string

如果你想在 LynxView 外部使用弹出框，则需要设置此属性。值为原生容器的名称。

debugLog

iOS

Android

Harmony

类型boolean

显示调试日志。发现 bug 时开启。

dialogViewProps

iOS

Android

Harmony

类型ViewProps | OverlayProps

将被直接传递到底层 OverlayView 元素的额外 view 或 overlay 属性

iOS

Android

Harmony

类型string

标识符

overlayLevel

iOS

Android

Harmony

类型1 | 2 | 3 | 4

仅当 'container' 设置为非空字符串时有效。调整附近元素的显示层级。

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 { ... }`。

DialogContent

The main content of the dialog.

children

iOS

Android

Harmony

类型ReactNode

子元素

className

iOS

Android

Harmony

类型string

类名

delayed

类型boolean

如果内容需要延迟首屏进行首次渲染，则需要将此属性设置为 true。

dialogContentProps

iOS

Android

Harmony

类型ViewProps

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

style

iOS

Android

Harmony

类型CSSProperties

样式

transition

iOS

Android

Harmony

类型boolean

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

#Dialog

#基础用法

#结构

#API

#DialogRoot

基于状态的样式与渲染

#DialogBackdrop

#DialogView

基于状态的样式与渲染

#DialogContent

`Dialog`

基础用法

结构

API

DialogRoot

DialogBackdrop

DialogView

DialogContent