Text Field · Tinyrack Design System

Flutter の controller、フォーカス、キーボード、自動入力、フォームのライフサイクルを保ちながらテキストを受け取り、検証します。

主なプロパティ

プロパティ	説明
フレーム	`solid` は枠線と背景、フォーカスリング、エラー強調を自分で描画します。`ghost` は通常時の枠線と背景だけを外し、`TRCard` のコンポーザーなど囲む側のサーフェスがフレームを持つようにします。フォーカスとエラー強調はフィールド自身が描き続けるため、サーフェス側で描き直す必要はありません。`plain` はエラー強調だけを残します。囲むカードがグループ全体に `focused` を設定する場合に使うと、リングは 2 本ではなくグループの外周に 1 本だけ描かれます。

インストール

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

flutter pub add tinyrack_ui

import 'package:tinyrack_ui/tinyrack_ui.dart';

プレイグラウンド

Flutter プレビューを読み込んでいます

使用方法

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

TRTextField(
  label: 'Rack name',
  controller: controller,
  validator: (value) =>
      value == null || value.isEmpty ? 'Required' : null,
  onSaved: save,
)

API

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