Tinyrack

Fieldset

関連するフォームコントロールを枠付きの領域にまとめます。

関連するフォームコントロールを枠付きの領域にまとめます。

主なプロパティ

プロパティ説明
レジェンドlegend はウィジェットスロットではなく、上端の枠線に重ねて描画される String です。null のままにすると、キャプションのない枠だけのグループになります。
グループ構成children は横方向に広がる Column に medium の間隔で積まれ、トークンで決まる余白・枠線・角丸の内側に配置されます。幅は親から与えられた分だけ広がるため、狭いグループが必要な場合は親側で制約してください。
状態disabled は無効時の不透明度トークンでグループを淡くし、Semantics 上でも無効として扱います。内部のコントロールは無効にならないため、各コントロールにも disabled を渡してください。
ラベルレジェンドは個々のコントロールではなくグループの名前です。各コントロールには TRField や隣接するテキストウィジェットで見えるラベルを与え、TRCheckbox などには semanticLabel を設定してください。

通知チャネルの選択のように、複数のコントロールが 1 つの問いにまとめて答える場合に TRFieldset を使ってください。縦方向の空間を共有するだけであれば、通常の Column で十分です。

インストール

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

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

TRFieldset(
  legend: 'Notifications',
  children: [
    Row(
      mainAxisSize: MainAxisSize.min,
      spacing: TRSpacing.small,
      children: const [
        TRCheckbox(defaultChecked: true, semanticLabel: 'Email alerts'),
        TRText('Email alerts', variant: TRTextVariant.bodySm),
      ],
    ),
  ],
)

例

通知チャネル パーマリンク

`legend` でグループに名前を付け、各コントロールにはチェックボックスの隣に見えるラベルと、対応する `semanticLabel` を与えてください。

有効なグループと無効なグループ パーマリンク

`disabled` はグループを淡くし、支援技術にも無効として伝えますが、内部のコントロールの操作までは止めません。編集できないようにするには、各コントロールにも `disabled` を渡してください。

入れ子のグループ パーマリンク

一部の選択肢がより狭い問いに属する場合は、フィールドセットを入れ子にしてください。各階層が自分のレジェンドを持つため、関係が読み取りやすくなります。

API

TRFieldset のプロパティ

Prop型 / デフォルト用途
childrenList<Widget> · requiredグループ化するコントロールを保持します。項目間に medium の間隔を持つ、横方向に広がる Column で配置されます。
legendString? · null上端の枠線にグループ名を表示します。現在のテキストスケールに合わせて計測されるため、文字を拡大しても枠線との間隔が保たれます。
disabledbool · false無効時の不透明度トークンを適用し、Semantics でグループを無効として公開します。子孫のコントロールは自身の有効状態を保ちます。