フォーカスリング · Tinyrack Design System

製品固有の複合コントロールに、Tinyrack コントロールと同じキーボード専用のフォーカス表示を適用します。

主なプロパティ

プロパティ	説明
入力方法	生のフォーカス状態を `focused` に渡してください。キーボード操作ではリングが表示され、ポインターで得たフォーカスでは表示されません。
レイアウト	リングは子の境界内に描画され、サイズや位置を変えません。

インストール

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

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

TRFocusRing(
  focused: focusNode.hasFocus,
  child: const CompositeControl(),
)

API

TRFocusRing のプロパティ

Prop	型 / デフォルト	用途
`focused`	`bool · required`	複合コントロールが現在フォーカスを持っているかを伝えます。
`child`	`Widget · required`	リングを表示する境界を持つ複合コントロールを指定します。