コンポーネントリファレンス
このパッケージには、汎用 WordPress コンポーネントライブラリーが含まれています。このコンポーネントを使用すると、画面とWordPress ダッシュボード機能との間で共有される共通 UI 要素を作成できます。
インストール
npm install @wordpress/components --save
このパッケージは、コードが ES2015+ 環境で実行されることを仮定しています。その言語機能や API の一部のみ、または、まったくサポートしない環境で使用するには、コードに @wordpress/babel-preset-default
の polyfill を含めてください。
使い方
Gutenberg 内でコンポーネントにアクセスするには components
ルートディレクトリからインポートしてください。
/**
* WordPress dependencies
*/
import { Button } from '@wordpress/components';
export default function MyButton() {
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
にあります。
Popovers
デフォルトで Popover
コンポーネントは、ドキュメントの body に追加された、余分な要素の中にレンダーします。
ポップオーバーがレンダーする場所を正確にコントロールしたければ、Popover.Slot
コンポーネントを使用する必要があります。
次の例は、Popover
を使ってコンポーネントをラップし、それらの popover を DOM の 1 つの場所にレンダリングする方法を示します。
/**
* External dependencies
*/
import { Popover, SlotFillProvider } from '@wordpress/components';
/**
* Internal dependencies
*/
import { MyComponentWithPopover } from './my-component';
const Example = () => {
<SlotFillProvider>
<MyComponentWithPopover />
<Popover.Slot />
</SlotFillProvider>;
};
TypeScript
このパッケージは、エクスポートするコンポーネントに対して独自の型を公開しますが、コンポーネントの props に対しては独自の型をエクスポートしません。props の型を抽出する必要がある場合は、React.ComponentProps
を使用して要素から型を取得してください。
import type { ComponentProps } from 'react';
import { Button } from '@wordpress/components';
export default function MyButton( props: ComponentProps< typeof Button > ) {
return <Button { ...props }>Click Me!</Button>;
}
ドキュメント & サンプル
コンポーネントのドキュメントとサンプルは https://wordpress.github.io/gutenberg/ で参照できます。
このパッケージへのコントリビュート
これは、Gutenberg プロジェクトの一部である、個別パッケージです。このプロジェクトは、monorepo として構成されています。複数の自己完結型ソフトウェアパッケージで構成されており、それぞれが特定の目的を持ちます。この monorepo のパッケージは npm で公開され、WordPress や他のソフトウェアプロジェクトで利用されています。
このパッケージや Gutenberg 全体へのコントリビュートの詳細については、プロジェクトのメインのコントリビューターガイドを参照ください。
このパッケージには、また、追加の詳細詳細を記述した独自の コントリビューター情報 があります。
コンポーネント一覧
原文およびその下のページを参照してください。
最終更新日: