Tinyrack

IconButton

必須のアクセシブルなラベルを持つコンパクトな Flutter アイコン操作を表示します。

必須のアクセシブルなラベルを持つコンパクトなアイコン操作を表示します。

主なプロパティ

プロパティ説明
意図intent は neutral、primary、info、success、warning、danger を受け取り、既定値は neutral です。
強調appearance は solid、outline、ghost を受け取り、既定値は solid です。意図を変えずに強調だけを調整します。
サイズuiSize は md、lg を受け取り、既定値は md です。各サイズは共通のコントロール指標から正方形のタップ領域とアイコンサイズを決めます。
状態onPressed が null の場合はボタンが無効になります。loading も操作を無効にし、アイコンをスピナーに置き換えたまま正方形のサイズを保ちます。

アイコンだけではアクセシブルな名前にならないため、label は必須です。アイコンの見た目ではなく、Add rack のようにボタンが実行する操作を名前にしてください。

インストール

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

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

TRIconButton(
  label: 'Add rack',
  icon: const Icon(Icons.add),
  onPressed: addRack,
)

例

操作の状態 パーマリンク

loading 中はアイコンをスピナーに置き換え、loadingLabel を一時的なアクセシブルな名前として使います。onPressed が null のボタンは表示されたまま無効になります。

外観 パーマリンク

最も強い強調には solid、境界を見せたい場合は outline、控えめなツールバー操作には ghost を選びます。

操作の意図 パーマリンク

主要な操作には primary を、取り消せない操作にのみ danger を使います。通常のツールバー操作の既定値は neutral です。

サイズ パーマリンク

各サイズが正方形のタップ領域とアイコンサイズをまとめて決めます。隣接するコントロールに合わせつつ、タッチ操作に十分な領域を確保してください。

API

TRIconButton のプロパティ

Prop型 / デフォルト用途
iconWidget · required単一のアイコンを描画します。サイズは uiSize から決まるため、size の明示は不要です。
labelString · requiredSemantics で公開されるアクセシブルな名前を設定し、loadingLabel の代替値にもなります。
onPressedVoidCallback? · requiredタップを受け取ります。null を渡すとボタンが無効になり、無効時の不透明度トークンが適用されます。
appearanceTRAppearance · TRAppearance.solidsolid、outline、ghost のいずれかの強調を選びます。
intentTRIntent · TRIntent.neutralWeb システムと共有するセマンティックな色の役割を選びます。
uiSizeTRUiSize · TRUiSize.md正方形のサイズとアイコンサイズをまとめて設定します。隣接するコントロールに合わせてください。
loadingbool · false処理中は操作を無効にし、アイコンを小さな TRSpinner に置き換えます。
loadingLabelString? · nullloading が true の間、アクセシブルな名前を置き換えます。省略した場合は label がそのまま使われます。