Tinyrack

Tabs

スライドする選択インジケーターでコンテンツパネルを切り替えます。

スライドする選択インジケーターでコンテンツパネルを切り替えます。

主なプロパティ

プロパティ説明
幅TRTabsWidth.fill が既定値で、使用可能なストリップ幅をタブごとに分けます。TRTabsWidth.fixed は各タブに TRMeasurements.measureSm 論理ピクセルを使い、収まらない場合は横スクロールします。
ドラッグTRTabsDragConfiguration を渡して有効にします。TRTabDropDetails はリストを変更せず、移動元グループ、移動先グループ、タブ値、挿入位置を通知します。

TRTabs は、1つの全幅ストリップにパネル、閉じる操作、アクション、ドラッグを必要に応じて組み合わせます。ドキュメントタブを measure-sm 幅に保つ場合は tabWidth: TRTabsWidth.fixed を使い、既定ではストリップを埋めます。タブの所有権と永続化はアプリ側で管理してください。

インストール

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

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';

TRTabs(
  tabs: const [
    TRTabsTab(value: 'overview', label: 'Overview'),
    TRTabsTab(value: 'settings', label: 'Settings'),
  ],
  panelBuilder: buildPanel,
)

例

サイズ パーマリンク

md・lg でタブバーの大きさが変わり、アクティブなインジケーターは保たれます。

パネル構成 パーマリンク

panelBuilder でアクティブな値を分岐し、タブごとにパネルを用意します。

組み合わせ可能なタブストリップ パーマリンク

ウィンドウがアクティブなドキュメントを管理する場合は panelBuilder を省略し、ドキュメントタブを measure-sm 幅に保ちながら、閉じる操作、先頭アイコン、アクション、ドラッグを必要な場合だけ追加します。

API

Tabs は Flutter のネイティブ状態とコールバックを保ち、Tinyrack トークンを既定値として使用します。