指南

指南是一个React组件,用于呈现用户指南在模态中。该指南由几页组成,用户可以逐一浏览。当模式关闭或用户单击时,指南完成完成在指南的最后一页。

用法

函数MyTutorial(){const[isOpen,setIsOpen]=使用状态(true);if(!is打开){返回null;}返回(<指南onFinish={()=>setIsOpen(false)}页数={[{content:<p>欢迎来到ACME商店</p> ,},{图像:<img src=“https://acmestore.com/add-to-cart.png" />,内容:(<p>单击<i>添加到购物车</i>购买产品。</p>),},] }/>);}

道具

组件接受以下道具:

类名

要添加到模态的自定义类。

  • 类型:一串
  • 必需:否

内容标签

此属性用作模态的可访问性标签。出于可访问性的原因,它是必需的。

  • 类型:一串
  • 必需:是

完成按钮文本

使用此选项自定义完成按钮显示在指南的末尾。

  • 类型:一串
  • 必需:否
  • 违约:'完成'

完成时

指南完成时调用的函数。当模式关闭或用户单击时,指南完成完成在指南的最后一页。

  • 类型:(事件?:KeyboardEvent<HTMLDivElement>|SyntheticEvent)=>void
  • 必需:是

描述指南中每个页面的对象列表。每个对象必须包含一个'内容'属性,可以选择包含'图像'属性。

  • 类型:{content:反应节点;图像?:反应节点;}[]
  • 必需:否
  • 违约:[]