云策 WordPress 开发者社区

块编辑器开发文档

Flyout

查看官方原文 ↗
💡 云策文档标注

概述

Flyout 是一个用于渲染浮动内容模态框的组件，类似于工具提示但支持任意类型内容。目前处于实验阶段，可能发生重大变更。

关键要点

  • Flyout 组件用于创建浮动模态框，可包含复杂内容，不同于仅显示文本的 tooltip。
  • 组件通过 trigger 属性触发显示，支持动画、位置、大小等自定义配置。
  • 作为实验性功能，其 API 和实现可能不稳定，开发者使用时需注意兼容性风险。

代码示例

import { Button, __experimentalFlyout as Flyout, __experimentalText as Text } from '@wordpress/components';

function Example() {
    return (
        <Flyout trigger={ <Button>Show/Hide content</Button> }>
            <Text>Code is Poetry</Text>
        </Flyout>
    );
}

注意事项

  • Flyout 是实验性组件，标记为 __experimental，未来版本中可能发生破坏性更改。
  • 使用时需从 '@wordpress/components' 导入，并注意依赖 Reakit 和 Popper 库的相关属性。
📄 原文内容
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

Flyout is a component to render a floating content modal. It is similar in purpose to a tooltip, but renders content of any sort, not only simple text.

Usage

import { Button, __experimentalFlyout as Flyout, __experimentalText as Text } from '@wordpress/components';

function Example() {
    return (
        <Flyout trigger={ <Button>Show/Hide content</Button> }>
            <Text>Code is Poetry</Text>
        </Flyout>
    );
}

Props

state: PopoverStateReturn

  • Required: No

label: string

  • Required: No

animated: boolean

Determines if Flyout has animations.

  • Required: No
  • Default: true

animationDuration: boolean

The duration of Flyout animations.

  • Required: No
  • Default: 160

baseId: string

ID that will serve as a base for all the items IDs. See https://reakit.io/docs/popover/#usepopoverstate

  • Required: No
  • Default: 160

elevation: number

Size of the elevation shadow. For more information, check out Card.

  • Required: No
  • Default: 5

maxWidth: CSSProperties[ 'maxWidth' ]

Max-width for the Flyout element.

  • Required: No
  • Default: 360

onVisibleChange: ( ...args: any ) => void

Callback for when the visible state changes.

  • Required: No

trigger: FunctionComponentElement< any >

Element that triggers the visible state of Flyout when clicked.

<Flyout trigger={<Button>Greet</Button>}>
    <Text>Hi! I'm Olaf!</Text>
</Flyout>

  • Required: Yes

visible: boolean

Whether Flyout is visible. See the Reakit docs for more information.

  • Required: No
  • Default: false

placement: PopperPlacement

Position of the popover element. See the popper docs for more information.

  • Required: No
  • Default: auto