@wordpress/nux

インストール

モジュールをインストールします

npm install @wordpress/nux --save

このパッケージは、あなたのコードがES2015+環境で実行されることを前提としています。そのような言語機能やAPIのサポートが限られているか、まったくない環境を使用している場合は、コードに@wordpress/babel-preset-defaultで提供されるポリフィルを含める必要があります。

DotTip

詳細については、[コンポーネントのREADME](https://github.com/WordPress/gutenberg/tree/HEAD/packages/nux/src/components/dot-tip/README.md)を参照してください。  
``````bash
<button onClick={ ... }>
   Add to Cart
   <DotTip tipId="acme/add-to-cart">
   Click here to add the product to your shopping cart.
   </DotTip>
</button>
}
`

ヒントが表示されているかどうかの判断

プログラム的にヒントが表示されているかどうかをisTipVisible選択メソッドを使用して判断できます。

const isVisible = select( 'core/nux' ).isTipVisible( 'acme/add-to-cart' );
console.log( isVisible ); // true or false

ヒントを手動で閉じる

``````bash
<button
   onClick={ () => {
   dispatch( 'core/nux' ).dismissTip( 'acme/add-to-cart' );
   } }
>
   Dismiss tip
</button>
`

ヒントの無効化と有効化

ヒントは、disableTipsおよびenableTipsディスパッチメソッドを使用してプログラム的に無効化または有効化できます。areTipsEnabled選択メソッドを使用して現在の設定を照会できます。

``````bash
const areTipsEnabled = select( 'core/nux' ).areTipsEnabled();
return (
   <button
   onClick={ () => {
   if ( areTipsEnabled ) {
   dispatch( 'core/nux' ).disableTips();
   } else {
   dispatch( 'core/nux' ).enableTips();
   }
   } }
   >
   { areTipsEnabled ? 'Disable tips' : 'Enable tips' }
   </button>
);
`

ガイドのトリガー

一連のヒントをtriggerGuideディスパッチメソッドを呼び出すことでガイドにグループ化できます。指定されたヒントは、1つずつ表示されます。

ヒントは、1つのガイドにしか追加できません。

dispatch( 'core/nux' ).triggerGuide( [
   'acme/product-info',
   'acme/add-to-cart',
   'acme/checkout',
] );

ガイドに関する情報の取得

``````bash
const guide = select( 'core/nux' ).getAssociatedGuide( 'acme/add-to-cart' );
console.log( 'Tips in this guide:', guide.tipIds );
console.log( 'Currently showing:', guide.currentTipId );
console.log( 'Next to show:', guide.nextTipId );
`

このパッケージへの貢献

これはGutenbergプロジェクトの一部である個別のパッケージです。このプロジェクトはモノレポとして整理されています。特定の目的を持つ複数の自己完結型ソフトウェアパッケージで構成されています。このモノレポ内のパッケージは、https://www.npmjs.com/に公開され、https://make.wordpress.org/core/や他のソフトウェアプロジェクトで使用されています。

このパッケージやGutenberg全体への貢献について詳しく知りたい場合は、プロジェクトの主要な貢献者ガイドをお読みください。