UI Component Lab English

← コンポーネント一覧

ナビゲーション

Tree view ツリービュー

ファイル管理のフォルダのように入れ子になったリストで、枝ごとに開閉できる部品。

  • はじめに.txt

別名

見分けるポイント

階層ごとに字下げされた項目が並び、子を持つ項目には三角やフォルダのアイコンが付く。開くと子の項目が一段下げて表示される。

挙動

  • フォルダをクリックすると開閉し、ファイルをクリックすると開く。
  • ツリー全体で Tab の止まる場所は1か所だけで、見えている項目の間は矢印キーで移る。
  • このデモでは APG にある、文字入力での移動と * での一括展開を省いている。

キーボード操作

キー動作
↑ / ↓前後の見えている項目へ移る。
→閉じたフォルダを開く。開いたフォルダでは最初の子へ移る。
←開いたフォルダを閉じる。子の項目では親へ移る。
Home / End最初または最後の見えている項目へ移る。
Enterファイルを開く。フォルダでは開閉する。

使い分け・注意点

  • フォルダや分類のような本当の階層に使う。内容のまとまりがいくつかあるだけなら、アコーディオンの方が簡単。
  • アコーディオン: ツリービューは入れ子の項目を何段にも開閉し、アコーディオンは内容のまとまりを1段で開閉する。

出典