Guide

使用法

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>
   ),
   },
   ] }
   />
   );
}

プロパティ

コンポーネントは以下のプロパティを受け入れます:

className

モーダルに追加するカスタムクラスです。

• タイプ: string
• 必須: いいえ
  

contentLabel

このプロパティはモーダルのアクセシビリティラベルとして使用されます。アクセシビリティの理由から必須です。

• タイプ: string
• 必須: はい
  

finishButtonText

ガイドの最後に表示されるFinishボタンのラベルをカスタマイズするために使用します。

• タイプ: string
• 必須: いいえ
• デフォルト: 'Finish'
  

onFinish

ガイドが終了したときに呼び出される関数です。モーダルが閉じられるか、ユーザーがガイドの最後のページでFinishをクリックしたときにガイドは終了します。

• タイプ: ( event?: KeyboardEvent< HTMLDivElement > | SyntheticEvent ) => void
• 必須: はい
  

pages

ガイド内の各ページを説明するオブジェクトのリストです。各オブジェクトは必ず'content'プロパティを含む必要があり、オプションで'image'プロパティを含むことができます。

• タイプ: { content: ReactNode; image?: ReactNode; }[]
• 必須: いいえ
• デフォルト: []