Tree Nav

選択中の移動先とネストされたレールを表示する、型付きの展開ナビゲーションを構築します。

主なプロパティ

順序付きのコレクションには TRTreeNav を使い、単独の移動先には TRNavigationRow を使います。Tab は読み順に従います。Enter と Space はフォーカス中の行を実行し、上下矢印はツリーの行間を移動し、展開・折りたたみの矢印はテキスト方向に従います。有効な行はポインター操作にホバーと押下中のサーフェスで応答します。無効な行はスキップされ、ポインターとキーボード入力を無視します。

インストール

パッケージを追加し、公開ライブラリをインポートしてください。

flutter pub add tinyrack_ui

import 'package:tinyrack_ui/tinyrack_ui.dart';

プレイグラウンド

使用方法

import 'package:material_ui/material_ui.dart';
import 'package:tinyrack_ui/tinyrack_ui.dart';

class DocsTree extends StatefulWidget {
  const DocsTree({super.key});

  @override
  State<DocsTree> createState() => _DocsTreeState();
}

class _DocsTreeState extends State<DocsTree> {
  String? currentPage = 'theming';

  @override
  Widget build(BuildContext context) => TRTreeNav<String>.controlled(
    value: currentPage,
    onValueChange: (value) => setState(() => currentPage = value),
    pageStorageId: 'docs-navigation',
    semanticLabel: 'Documentation',
    items: const [
      TRTreeNavGroup(
        value: 'guides',
        label: Text('GUIDES'),
        description: Text('Product documentation'),
        initiallyExpanded: true,
        children: [
          TRTreeNavLeaf(
            value: 'install',
            label: Text('Install'),
            description: Text('Add and configure the package'),
          ),
          TRTreeNavGroup(
            value: 'advanced',
            label: Text('ADVANCED'),
            initiallyExpanded: true,
            children: [
              TRTreeNavLeaf(value: 'plugins', label: Text('Plugins')),
              TRTreeNavLeaf(value: 'theming', label: Text('Theming')),
            ],
          ),
        ],
      ),
    ],
  );
}

例

API