Component Reference - Composite - 《WordPress開発者リソース》日本語

Usage
Components
- Composite
  - Props
- Composite.Group
  - render: RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>
  - children: React.ReactNode
Composite.GroupLabel
- render: RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>
- children: React.ReactNode
Composite.Item
Composite.Row
- render: RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>
- children: React.ReactNode
Composite.Hover
- render: RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>
- children: React.ReactNode
Composite.Typeahead
- render: RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>
- children: React.ReactNode
Composite.Context

Usage

import { Composite } from '@wordpress/components';
<Composite>
  <Composite.Group>
   <Composite.GroupLabel>Label</Composite.GroupLabel>
   <Composite.Item>Item 1</Composite.Item>
   <Composite.Item>Item 2</Composite.Item>
  </CompositeGroup>
</Composite>

Components

Composite

コンポジットウィジェットをレンダリングします。

Props

activeId: string | null

現在のアクティブアイテムは id です。アクティブアイテムは、コンポジットウィジェット内で DOM または仮想フォーカスを持つ要素です（virtualFocus プロパティが有効な場合）。

null は基本コンポジット要素を表します（コンポジットロールを持つもの）。ユーザーは矢印キーを使用してそこからナビゲートできます。
activeId が最初に null に設定されている場合、基本コンポジット要素自体がフォーカスを持ち、ユーザーは矢印キーを使用してそれにナビゲートできます。
必須: いいえ

defaultActiveId: string | null

コンポジットウィジェットがレンダリングされるときにデフォルトでアクティブにすべきコンポジットアイテムのIDです。null の場合、コンポジット要素自体がフォーカスを持ち、ユーザーは矢印キーを使用してそれにナビゲートできます。undefined の場合、最初の有効なアイテムがフォーカスされます。

必須: いいえ

setActiveId: ((activeId: string | null | undefined) => void)

activeId ステートが変更されたときに呼び出されるコールバックです。

必須: いいえ

focusLoop: boolean | ‘horizontal’ | ‘vertical’ | ‘both’

ユーザーがコンポジットウィジェットの端に達したときのフォーカスの動作を決定します。

一次元のコンポジットウィジェットの場合:

true は最後のアイテムから最初のアイテムにループし、逆も同様です。
horizontal は orientation が horizontal に設定されている場合または設定されていない場合にのみループします。
vertical は orientation が vertical に設定されている場合または設定されていない場合にのみループします。
activeId が最初に null に設定されている場合、コンポジット要素は最後のアイテムと最初のアイテムの間でフォーカスされます。

二次元のコンポジットウィジェットの場合（例: CompositeRow を使用している場合）:

true は最後の行/列のアイテムから同じ行/列の最初のアイテムにループし、逆も同様です。最後の行の最後のアイテムの場合、最初の行の最初のアイテムに移動し、逆も同様です。
horizontal は最後の行のアイテムから同じ行の最初のアイテムにのみループします。
vertical は最後の列のアイテムから列の行の最初のアイテムにのみループします。
activeId が最初に null に設定されている場合、垂直ループは効果がなく、最後の行から下に移動するか、最初の行から上に移動するとコンポジット要素にフォーカスされます。
focusWrap が focusLoop の値と一致する場合、最後の行または列の最後のアイテムと最初の行または列の最初のアイテムの間でラップします。
必須: いいえ
デフォルト: false

focusShift: boolean

二次元のコンポジットウィジェットでのみ機能します。

有効にすると、次のアイテムがない場合や次のアイテムが無効な場合に上または下に移動すると、直前のアイテムにシフトします。

必須: いいえ
デフォルト: false

focusWrap: boolean

二次元のコンポジットウィジェットでのみ機能します。

有効にすると、行または列の最後のアイテムから次のアイテムに移動すると、次の行または列の最初のアイテムにフォーカスされ、逆も同様です。

true は行と列の間でラップします。
horizontal は行の間でのみラップします。
vertical は列の間でのみラップします。
focusLoop が focusWrap の値と一致する場合、最後の行または列の最後のアイテムと最初の行または列の最初のアイテムの間でラップします。
必須: いいえ
デフォルト: false

virtualFocus: boolean

有効にすると、コンポジット要素は aria-activedescendant コンテナとして機能します。

DOMフォーカスはコンポジット要素に残り、そのアイテムは仮想フォーカスを受け取ります。

どちらのシナリオでも、フォーカスされているアイテムは data-active-item 属性を持ちます。

必須: いいえ
デフォルト: false

orientation: ‘horizontal’ | ‘vertical’ | ‘both’

コンポジットウィジェットの方向を定義します。コンポジットが単一の行または列（一次元）の場合、orientation の値はフォーカスを移動するために使用できる矢印キーを決定します:

both: すべての矢印キーが機能します。
horizontal: 左右の矢印キーのみが機能します。
vertical: 上下の矢印キーのみが機能します。

二次元のコンポジットには影響しません。

必須: いいえ
デフォルト: both

rtl: boolean

store の next および previous 関数の動作を決定します。rtl が true に設定されている場合、それらは反転します。

これはコンポジットウィジェットの動作にのみ影響します。HTML/CSSで dir="rtl" を設定する必要があります。

必須: いいえ
デフォルト: false

render: RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>

コンポーネントを異なるHTML要素またはReactコンポーネントとしてレンダリングできるようにします。値はReact要素または元のコンポーネントのプロパティを受け取り、マージされたプロパティを持つReact要素を返す関数であることができます。

必須: いいえ

focusable: boolean

コンポーネントをフォーカス可能な要素にします。この要素がキーボードフォーカスを取得すると、data-focus-visible 属性を取得し、onFocusVisible プロパティをトリガーします。

コンポーネントは、ネイティブ disabled 属性をサポートしていない要素に対しても disabled プロパティをサポートします。無効な要素は、accessibleWhenDisabled プロパティを使用してキーボード経由でアクセス可能である場合があります。

非ネイティブフォーカス可能要素は、フォーカス可能性を完全に失います。ただし、ネイティブフォーカス可能要素は、その固有のフォーカス可能性を保持します。

必須: いいえ

disabled: boolean

要素が無効かどうかを決定します。これにより、aria-disabled 属性が適切に設定され、ネイティブ disabled 属性をサポートしていない要素を含むすべての要素のサポートが有効になります。

この機能は、accessibleWhenDisabled プロパティと組み合わせて、無効な要素をキーボード経由でアクセス可能にすることができます。

注意: このプロパティが機能するためには、focusable プロパティがデフォルトで設定されていない場合、true に設定されている必要があります。

必須: いいえ
デフォルト: false

accessibleWhenDisabled: boolean

要素が disabled の場合でもフォーカス可能であるべきかどうかを示します。

これは、発見可能性が懸念される場合に重要です。例えば:

> エディタのツールバーには、特別なスマートペースト機能のセットが含まれています。
>
> クリップボードが空であるか、機能が現在のクリップボードの内容に適用できない場合、これらは無効になります。無効なボタンをフォーカス可能に保つことは、ツールバー上での存在によってその機能を発見する能力が主にある場合に役立ちます。
無効なコントロールのフォーカス可能性についての詳細は、[https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols]を参照してください。

必須: いいえ

onFocusVisible: (event: SyntheticEvent<HTMLElement>) => void

キーボード操作を通じて要素がフォーカスを取得したとき、または要素がフォーカス中にキーが押されたときに呼び出されるカスタムイベントハンドラーです。これは data-focus-visible 属性のプログラム的な同等物です。

注意: このプロパティが機能するためには、focusable プロパティがデフォルトで設定されていない場合、true に設定されている必要があります。

必須: いいえ

children: React.ReactNode

コンポーネントの内容です。

必須: いいえ

Composite.Group

コンポジットアイテムのグループ要素をレンダリングします。

render: RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>

必須: いいえ

children: React.ReactNode

コンポーネントの内容です。

必須: いいえ

Composite.GroupLabel

コンポジットグループ内にラベルをレンダリングします。このコンポーネントは Composite.Group でラップする必要があり、aria-labelledby プロパティがコンポジットグループ要素に適切に設定されます。

render: RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>

必須: いいえ

children: React.ReactNode

コンポーネントの内容です。

必須: いいえ

Composite.Item

コンポジットアイテムをレンダリングします。

accessibleWhenDisabled: boolean

要素が disabled の場合でもフォーカス可能であるべきかどうかを示します。

これは、発見可能性が懸念される場合に重要です。例えば:

必須: いいえ

render: RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>

必須: いいえ

children: React.ReactNode

コンポーネントの内容です。

必須: いいえ

Composite.Row

コンポジット行をレンダリングします。Composite.Item 要素を Composite.Row でラップすると、グリッドのような二次元コンポジットウィジェットが作成されます。

render: RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>

必須: いいえ

children: React.ReactNode

コンポーネントの内容です。

必須: いいえ

Composite.Hover

マウス移動でフォーカスを受け取り、マウス離脱でコンポジット基本要素にフォーカスを失うコンポジットウィジェット内の要素をレンダリングします。これは Composite.Item コンポーネントと組み合わせる必要があります。

render: RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>

必須: いいえ

children: React.ReactNode

コンポーネントの内容です。

必須: いいえ

Composite.Typeahead

コンポジットコンポーネントにタイプアヘッド機能を追加するコンポーネントをレンダリングします。印刷可能な文字キーを押すと、入力文字で始まる次のコンポジットアイテムにフォーカスが移動します。

render: RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>

必須: いいえ

children: React.ReactNode

コンポーネントの内容です。

必須: いいえ

Composite.Context

コンポジットコンポーネントで使用されるReactコンテキストです。コンポジットストアにアクセスするために使用でき、コンポジットサブコンポーネントがポータルを介してレンダリングされるときにコンテキストを転送するために使用されます（例: SlotFill コンポーネント）で、そうでなければ Fill 子要素にコンテキストを転送しません。