Guide 是一个 React 组件，用于在模态框中渲染用户指南。该指南由多个页面组成，用户可以逐一浏览。当模态框关闭或用户在指南最后一页点击完成时，指南结束。
用法
function MyTutorial() {
const [ isOpen, setIsOpen ] = useState( true );
if ( ! isOpen ) {
return null;
}
return (
<Guide
onFinish={ () => setIsOpen( false ) }
pages={ [
{
content: <p>欢迎使用 ACME Store！</p>,
},
{
image: <img src="https://acmestore.com/add-to-cart.png" />,
content: (
<p>
点击 添加到购物车 以购买商品。
</p>
),
},
] }
/>
);
}
属性
该组件接受以下属性：
className
添加到模态框的自定义类名。
- 类型：
string - 是否必需：否
contentLabel
此属性用作模态框的可访问性标签。出于无障碍原因，它是必需的。
- 类型：
string - 是否必需：是
finishButtonText
使用此属性自定义指南末尾显示的完成按钮的标签。
- 类型：
string - 是否必需：否
- 默认值：
'Finish'
nextButtonText
使用此属性自定义指南每个页面上显示的下一步按钮的标签。
- 类型：
string - 是否必需：否
- 默认值：
'Next'
previousButtonText
使用此属性自定义指南除第一页外每个页面上显示的上一步按钮的标签。
- 类型：
string - 是否必需：否
- 默认值：
'Previous'
onFinish
当指南结束时调用的函数。当模态框关闭或用户在指南最后一页点击完成时，指南结束。
- 类型：
( event?: KeyboardEvent< HTMLDivElement > | SyntheticEvent ) => void - 是否必需：是
pages
描述指南中每个页面的对象列表。每个对象必须包含 'content' 属性，并且可以可选地包含 'image' 属性。
- 类型：
{ content: ReactNode; image?: ReactNode; }[] - 是否必需：否
- 默认值：
[]