Guide

查看官方原文 ↗

💡 云策文档标注

概述

Guide 是一个 React 组件，用于在模态框中渲染用户指南，支持多页面逐步浏览。指南通过关闭模态框或点击最后一页的 Finish 按钮完成。

关键要点

Guide 组件基于 React，以模态框形式展示分页指南内容。
组件接受多个 props，包括必填的 contentLabel 和 onFinish，以及可选的页面配置和按钮文本自定义。
pages prop 定义指南页面，每个页面必须包含 content，可选包含 image。

代码示例

function MyTutorial() {
    const [ isOpen, setIsOpen ] = useState( true );

    if ( ! isOpen ) {
        return null;
    }

    return (
        <Guide
            onFinish={ () => setIsOpen( false ) }
            pages={ [
                {
                    content: <p>Welcome to the ACME Store!</p>,
                },
                {
                    image: <img src="https://acmestore.com/add-to-cart.png" />,
                    content: (
                        <p>
                            Click <i>Add to Cart</i> to buy a product.
                        </p>
                    ),
                },
            ] }
        />
    );
}

注意事项

contentLabel prop 是必填的，用于模态框的无障碍访问标签。
onFinish prop 是必填的，用于处理指南完成时的回调函数。
pages prop 默认为空数组，需确保每个页面对象包含 content 属性。

📄 原文内容

Guide is a React component that renders a user guide in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks Finish on the last page of the guide.

Usage

function MyTutorial() {
    const [ isOpen, setIsOpen ] = useState( true );

    if ( ! isOpen ) {
        return null;
    }

    return (
        <Guide
            onFinish={ () => setIsOpen( false ) }
            pages={ [
                {
                    content: <p>Welcome to the ACME Store!</p>,
                },
                {
                    image: <img src="https://acmestore.com/add-to-cart.png" />,
                    content: (
                        <p>
                            Click <i>Add to Cart</i> to buy a product.
                        </p>
                    ),
                },
            ] }
        />
    );
}

Props

The component accepts the following props:

className

A custom class to add to the modal.

Type: string
Required: No

contentLabel

This property is used as the modal’s accessibility label. It is required for accessibility reasons.

Type: string
Required: Yes

finishButtonText

Use this to customize the label of the Finish button shown at the end of the guide.

Type: string
Required: No
Default: 'Finish'

nextButtonText

Use this to customize the label of the Next button shown on each page of the guide.

Type: string
Required: No
Default: 'Next'

previousButtonText

Use this to customize the label of the Previous button shown on each page of the guide except the first.

Type: string
Required: No
Default: 'Previous'

onFinish

A function which is called when the guide is finished. The guide is finished when the modal is closed or when the user clicks Finish on the last page of the guide.

Type: ( event?: KeyboardEvent< HTMLDivElement > | SyntheticEvent ) => void
Required: Yes

云策 WordPress 开发者社区

块编辑器开发文档