NavigableContainer

プロップ

これらは NavigableMenu と TabbableContainer のプロップです。特定のコンポーネントに固有のプロップは適切にラベル付けされています。

cycle: boolean

コンポーネントが終了から開始に戻るかどうかを示すブール値です。

• 必須: いいえ
• デフォルト: true
  

eventToOffset: ( event: KeyboardEvent ) =

-1 | 0 | 1 | undefined

（TabbableContainer のみ）

イベントに基づいてオフセットを取得します。

• 必須: いいえ
  

onKeyDown: ( event: KeyboardEvent ) =

void

キーが押されたときに呼び出されるコールバックです。

• 必須: いいえ
  

onNavigate: ( index: number, focusable: HTMLElement ) =

void

メニューが子要素の1つにナビゲートするときに、インデックスと子要素を引数として渡すコールバックです。

• 必須: いいえ
  

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

（NavigableMenu のみ）

メニューの方向です。「縦」、「横」、または「両方」のいずれかです。

• 必須: いいえ
• デフォルト: "vertical"
  

コンポーネント

NavigableMenu

NavigableMenu は、矢印キーを使用してコンポーネント内を上下（または左右）に移動できるようにします。tab キーは処理されません。orientation プロップは、使用される矢印キーが縦、横、または両方であるかを判断するために使用されます。

デフォルトでは、NavigableMenu は menu ロールを持ち、期待通りに機能するためには、コンポーネントはその子要素が次のいずれかのロールを持つことを期待します: 'menuitem' | 'menuitemradio' | 'menuitemcheckbox'。

TabbableContainer

TabbableContainer は tab キーを使用してのみナビゲートされます。すべての意図されたタブストップには tabIndex 0 が必要です。

使用法

import {
   NavigableMenu,
   TabbableContainer,
   Button,
} from '@wordpress/components';
function onNavigate( index, target ) {
   console.log( `Navigates to ${ index }`, target );
}
const MyNavigableContainer = () => (
   <div>
   <span>Navigable Menu:</span>
   <NavigableMenu onNavigate={ onNavigate } orientation="horizontal">
   <Button variant="secondary">Item 1</Button>
   <Button variant="secondary">Item 2</Button>
   <Button variant="secondary">Item 3</Button>
   </NavigableMenu>
   <span>Tabbable Container:</span>
   <TabbableContainer onNavigate={ onNavigate }>
   <Button variant="secondary" tabIndex="0">
   Section 1
   </Button>
   <Button variant="secondary" tabIndex="0">
   Section 2
   </Button>
   <Button variant="secondary" tabIndex="0">
   Section 3
   </Button>
   <Button variant="secondary" tabIndex="0">
   Section 4
   </Button>
   </TabbableContainer>
   </div>
);