開発ガイドライン

  2. ツリーグリッドは、階層的な2次元UIコンポーネントであり、例えばファイルシステムブラウザを実装するために使用されることがあります。  
  4. ツリーグリッドでは、ユーザーは矢印キーを使用してナビゲートできます。上下で行を縦に移動し、左右で行内のフォーカス可能な要素間を横に移動します。  
  6. ツリーグリッドに関する詳細情報は、以下のリンクを参照してください：  
  8. - https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html
  9.  <a name="usage"></a>
  12. ### 使用法
  14. `````TreeGrid`````は、`````table`````および`````tbody`````要素の両方をレンダリングし、`````TreeGridRow`````（`````tr`````）および`````TreeGridCell`````（`````td`````）と共に使用してグリッドを構築することを意図しています。  
  17. ``````bash
  18. function TreeMenu() {
  19.    return (
  20.    <TreeGrid>
  21.    <TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 2 }>
  22.    <TreeGridCell>
  23.    { ( props ) => (
  24.    <Button onClick={ onSelect } { ...props }>Select</Button>
  25.    ) }
  26.    </TreeGridCell>
  27.    <TreeGridCell>
  28.    { ( props ) => (
  29.    <Button onClick={ onMove } { ...props }>Move</Button>
  30.    ) }
  31.    </TreeGridCell>
  32.    </TreeGridRow>
  33.    <TreeGridRow level={ 1 } positionInSet={ 2 } setSize={ 2 }>
  34.    <TreeGridCell>
  35.    { ( props ) => (
  36.    <Button onClick={ onSelect } { ...props }>Select</Button>
  37.    ) }
  38.    </TreeGridCell>
  39.    <TreeGridCell>
  40.    { ( props ) => (
  41.    <Button onClick={ onMove } { ...props }>Move</Button>
  42.    ) }
  43.    </TreeGridCell>
  44.    </TreeGridRow>
  45.    <TreeGridRow level={ 2 } positionInSet={ 1 } setSize={ 1 }>
  46.    <TreeGridCell>
  47.    { ( props ) => (
  48.    <Button onClick={ onSelect } { ...props }>Select</Button>
  49.    ) }
  50.    </TreeGridCell>
  51.    <TreeGridCell>
  52.    { ( props ) => (
  53.    <Button onClick={ onMove } { ...props }>Move</Button>
  54.    ) }
  55.    </TreeGridCell>
  56.    </TreeGridRow>
  57.    </TreeGrid>
  58.    );
  59. }
  60. `

サブコンポーネント

ツリーグリッド

プロパティ

文書化されたコールバック関数の他に、指定されたプロパティはtable要素に渡されます。TreeGridは常に子要素を持つ必要があります。

onFocusRow: ( event: KeyboardEvent, startRow: HTMLElement, destinationRow: HTMLElement ) => void

上矢印キーと下矢印キーを使用してフォーカスが1行から別の行に移動したときに発火するコールバックです。フォーカスが最初の行から最後の行に移動する際に、HomeキーとEndキーでもコールバックが発火します。

コールバックには、イベント、元々フォーカスがあった開始行要素、およびフォーカスが移動した後の目的地行要素が渡されます。

  • 必須: いいえ
onCollapseRow: ( row: HTMLElement ) => void

折りたたむ行要素を渡すコールバックです。

  • 必須: いいえ
onExpandRow: ( row: HTMLElement ) => void

展開する行要素を渡すコールバックです。

  • 必須: いいえ

TreeGridRow

プロパティ

以下に指定されたプロパティ以外の追加プロパティは、tr要素に渡されるため、例えば行にclassNameを設定することも可能です。

level: number

階層ツリー構造内のレベルを示す整数値です。カウントは1から始まります。1の値は構造のルートレベルを示します。

  • 必須: はい
positionInSet: number

セット内の位置を表す整数値です。セットは特定のレベルでの要素の数です。カウントは1から始まります。

  • 必須: はい
setSize: number

この特定の階層レベルにおけるセット内のアイテムの総数を表す整数値です。

  • 必須: はい
isExpanded: boolean

行が展開されているか折りたたまれているかを示すオプションの値です。現在、この値は行のaria-expandedプロパティを正しく設定するだけで、他の組み込みの動作はありません。

行、セル、またはセル内の要素の他の場所でaria-expandedを実装する必要がある場合は、isExpanded={ undefined }を渡すことができます。キーボードナビゲーションが引き続き機能するように、data-expanded属性をtrue/falseのいずれかで追加します。これにより、TreeGridコンポーネントはキーボードインタラクションを管理し続け、aria-expanded属性を他の場所に配置することができます。以下の例を参照してください。

  • 必須: いいえ
  1. function TreeMenu() {
  2.    return (
  3.    <TreeGrid>
  4.    <TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 2 } isExpanded={ undefined } data-expanded={ false }>
  5.    <TreeGridCell>
  6.    { ( props ) => (
  7.    <Button aria-expanded="false" onClick={ onSelect } { ...props }>Select</Button>
  8.    ) }
  9.    </TreeGridCell>
  10.    </TreeGridRow>
  11.    </TreeGrid>
  12.    );
  13. }

TreeGridCell

プロパティ

  3. #### children as a function
  5. `````TreeGridCell`````は関数を使用して子要素をレンダリングします：  
  8. ``````bash
  9. <TreeGridCell>
  10.    { ( props ) => (
  11.    <Button onClick={ doSomething } { ...props }>
  12.    Do something
  13.    </Button>
  14.    ) }
  15. </TreeGridCell>
  16. `

レンダープロップに引数として渡されたプロパティは、セル内の子フォーカス可能コンポーネント/要素に渡される必要があります。コンポーネントが使用される場合、onFocus、tabIndex、およびrefプロパティを正しく処理し、レンダリングする要素にこれらを渡す必要があります。これらのプロパティは、ツリーグリッドのロービングタブインデックス機能を処理するために使用されます。

関連コンポーネント

  • このコンポーネントはRovingTabIndexを実装しています。