Tinyrack

Card

枠線のある Tinyrack サーフェスに関連する Flutter コンテンツをまとめます。

枠線のあるセマンティックなサーフェスに関連コンテンツをまとめます。

主なプロパティ

プロパティ説明
フォーカスコンテンツをまとめるだけのカードでは focused をオフのままにします。複数のコントロールをひとつとして扱う場合は子の生のフォーカス状態を渡し、内側のフィールドに TRFieldAppearance.plain を指定してリングが 2 本ではなく 1 本だけ描かれるようにしてください。カードはキーボード操作のときだけリングを表示します。TRFieldAppearance.ghost のフィールドは自身でフォーカスを描くため、そのフィールドだけを囲むカードではオフのままにしてください。リングはカードの上に描画されるため、カードの寸法は変わりません。

インストール

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

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

const TRCard(
  variant: TRCardVariant.outlined,
  child: TRCardHeader(
    children: [
      TRCardTitle(child: Text('Rack alpha')),
      TRCardDescription(child: Text('Healthy')),
    ],
  ),
)

例

種類 パーマリンク

default・outlined・elevated から選び、カードをページからどれだけ際立たせるかを決めます。

コンテンツ構成 パーマリンク

header・content・footer のスロットを組み合わせ、アクション付きのカードを構成します。

API

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