デザインガイドライン

解剖学

パネルは、必要に応じて展開または折りたたむことができるコンテンツの単一セクションです。

パネルの解剖学

  • 1. パネル
  • 2. 本体
  • 3. 区切り

使用法

パネルは、リストアイテムの詳細を垂直に展開および折りたたむことによって表示および非表示にします。パネルは、ユーザーが必要なコンテンツのみを表示できるようにします。

パネルを使用するタイミング

パネルを使用するのは、次のような場合に役立ちます：

  • 複数の関連するコンテンツセクションの概要を確認する。
  • 必要に応じてそれらのセクションを表示および非表示にする。
  • ユーザーが常に見る必要のない優先度の低い情報を隠す。
  • 一度に複数のセクションを表示する。

次のような場合は、代替コンポーネントを検討してください：

  • 重要な情報やエラーメッセージがあり、即座のアクションが必要な場合。
  • いくつかのセクション間を迅速に切り替える必要がある場合（代わりにタブを使用することを検討してください）。

動作

展開と折りたたみ

既存のパネルアイテムの詳細を垂直に展開および折りたたむことによって表示および非表示にします。

Panel - img2

折りたたみ可能なパネルは、展開時に反転するキャレットアイコンで示されます。キャレットは、追加を示すプラスやナビゲーションに密接に関連する矢印よりも好まれます。

コンテンツが重要または必須である場合、パネルはデフォルトで展開されるべきです。デフォルトで開いているパネルは、上部に表示されるべきです。

開発ガイドライン

  1.  <a name="usage-2"></a>
  4. ### 使用法
  6. ``````bash
  7. import { Panel, PanelBody, PanelRow } from '@wordpress/components';
  8. import { more } from '@wordpress/icons';
  10. const MyPanel = () => (
  11.    <Panel header="My Panel">
  12.    <PanelBody title="My Block Settings" icon={ more } initialOpen={ true }>
  13.    <PanelRow>My Panel Inputs and Labels</PanelRow>
  14.    </PanelBody>
  15.    </Panel>
  16. );
  17. `

サブコンポーネント

パネル

プロップ
header: string

パネルのタイトルとしてレンダリングされるテキスト。テキストは、

<h2> タグ内にレンダリングされます。

  • 必須: いいえ
className: string

ラッパー要素に適用するCSSクラス。

  • 必須: いいえ
children: React.ReactNode

パネル行内に表示するコンテンツ。

  • 必須: はい

      • PanelBody

  3. ##### プロップ
  5. ###### title: string
  7. タイトルテキスト。コンポーネントが閉じているときでも表示されます。  
  9. - 必須: いいえ
  12. ###### opened: boolean
  14. `````true`````に設定されている場合、コンポーネントは`````initialOpen`````プロップに関係なく開いたままとなり、  
  16. パネルは閉じることができなくなります。  
  18. - 必須: いいえ
  21. ###### className: string
  23. ラッパー要素に適用するCSSクラス。  
  25. - 必須: いいえ
  28. ###### icon: JSX.Element
  30. タイトルの横に表示されるアイコン。  
  32. - 必須: いいえ
  35. ###### onToggle: ( next: boolean ) =&gt; void;
  37. コンポーネントが閉じた状態から開いた状態に切り替えられるたびに呼び出される関数、またはその逆。  
  39. - 必須: いいえ 
  40. - デフォルト: `````noop
initialOpen: boolean

パネルが開いた状態で開始するかどうか。

  • 必須: いいえ
  • デフォルト: true
children: | React.ReactNode | ( ( props: { opened: boolean } ) => React.ReactNode )

PanelBodyに表示するコンテンツ。 このプロップに関数が提供されると、openedプロップを引数として持つオブジェクトが渡されます。

  • 必須: いいえ
buttonProps: WordPressComponentProps<Omit< ButtonAsButtonProps, ‘icon’ >, ‘button’, false>

タイトル内のButtonコンポーネントに渡されるプロップ。

  • 必須: いいえ
  • デフォルト: {}
scrollAfterOpen: boolean

表示されるときにコンテンツをビューにスクロールします。 これは、複数のPanelBodyコンポーネントがスクロール可能なコンテナにスタックされているときにUXを改善します。

  • 必須: いいえ

  • デフォルト: true

      • PanelRow

  3. ##### プロップ
  5. ###### className: string
  7. ラッパー要素に適用するCSSクラス。  
  9. - 必須: いいえ
  12. ###### children: React.ReactNode
  14. パネル行内に表示するコンテンツ。  
  16. - 必須: いいえ
  19. ##### Ref
  21. PanelRowは、ラッパーdivに追加されるフォワードrefを受け入れます。使用法：  
  23. `````<PanelRow className="edit-post-post-schedule" ref={ panelRowRef }>

      • PanelHeader

PanelHeaderは、Panelのヘッダーをレンダリングします。これは、通常使用する必要がないPanelコンポーネントによって内部で使用されます。

プロップ
label: string

Panelのタイトルとしてレンダリングされるテキスト。<h2>タグ内にレンダリングされます。

  • 必須: いいえ
children: React.ReactNode

パネル行内に表示するコンテンツ。

  • 必須: いいえ

関連コンポーネント

  • 水平メニューでアクセスされる関連セクションを分割するには、TabPanelを使用します。