コンポーネントリファレンス
このパッケージには、汎用 WordPress コンポーネントライブラリーが含まれています。このコンポーネントを使用すると、画面とWordPress ダッシュボード機能との間で共有される共通 UI 要素を作成できます。
インストール
モジュールのインストール
npm install @wordpress/components --save
このパッケージは、コードが ES2015+ 環境で実行されることを仮定しています。その言語機能や API の一部のみ、または、まったくサポートしない環境で使用するには、コードに @wordpress/babel-preset-default の polyfill を含めてください。
使い方
Gutenberg 内でコンポーネントにアクセスするには components ルートディレクトリからインポートしてください。
/**
* WordPress dependencies
*/import { Button } from'@wordpress/components';
exportdefaultfunctionMyButton() {
return<Button>Click Me!</Button>;
}
多くのコンポーネントには期待する表示のため、スタイルを追加する CSS が含まれています。WordPress プロジェクトの場合はプラグインのスタイルシートの依存として wp-components スタイルシートを追加してください。依存性の指定については wp_enqueue_style のドキュメントを参照してください。
WordPress 以外のプロジェクトの場合は、直接 build-style/style.css ファイルをリンクしてください。node_modules/@wordpress/components/build-style/style.css にあります。
Popover と Tooltip
もし、Popover コンポーネント、または Tooltip コンポーネントをエディターの外で使用している場合、それらのコンポーネントは、SlotFillProvider 内で、要素ツリーのどこかで Popover.Slot と一緒にレンダーされる必要があります。
Popover コンポーネントは、デフォルトではインラインでレンダーされます。すなわち、その親の中に固定されます。しかし、使用されるコンテキストによっては、Popover が不適切な位置に表示される場合があります。例えば、他の popover の中にネストしている場合です。
この問題は、popover を Popover.Slot を介して DOM の特定の場所にレンダリングすることで解決できます。このためには、 Popover コンポーネントとその Slot を SlotFill プロバイダでラップする必要があります。
Popover は Tooltip コンポーネントを表示するベースのメカニズムとしても使用されます。したがって、同じ考慮が、Tooltip でも必要です。
次の例は、Popover を使ってコンポーネントをラップし、それらの popover を DOM の 1 つの場所にレンダリングする方法を示します。
/**
* External dependencies
*/import { Popover, SlotFillProvider } from'@wordpress/components';
/**
* Internal dependencies
*/import { MyComponentWithPopover } from'./my-component';
constExample = () => {
<SlotFillProvider>
<MyComponentWithPopover />
<Popover.Slot>
</SlotFillProvider>
};
ドキュメント & サンプル
コンポーネントのドキュメントとサンプルは https://wordpress.github.io/gutenberg/ で参照できます。
このパッケージへのコントリビュート
これは、Gutenberg プロジェクトの一部である、個別パッケージです。このプロジェクトは、monorepo として構成されています。複数の自己完結型ソフトウェアパッケージで構成されており、それぞれが特定の目的を持ちます。この monorepo のパッケージは npm で公開され、WordPress や他のソフトウェアプロジェクトで利用されています。
このパッケージや Gutenberg 全体へのコントリビュートの詳細については、プロジェクトのメインのコントリビューターガイドを参照ください。
このパッケージには、また、追加の詳細詳細を記述した独自の コントリビューター情報 があります。
コンポーネント一覧
原文およびその下のページを参照してください。
最終更新日: