Tinyrack

AlertDialog

明示的な選択が必要なモーダルで、破壊的または元に戻せない操作を確認します。

明示的な選択が必要なモーダルで、破壊的または元に戻せない操作を確認します。

主なプロパティ

プロパティ説明
アクションTRButton だけを渡し、安全なアクションから最も破壊的なアクションの順に配置します。
閉じる操作背景タップは無効で、Escape とシステムの戻る操作はルートを閉じます。
結果とフォーカスNavigator.pop は型付きの結果を返し、フォーカスは開いたコントロールへ戻ります。
オーバーフロー本文コンテンツをそのまま渡します。AlertDialog はアクションを表示したまま、文字方向に応じたサーフェス端であふれた本文をスクロールします。

キャンセルには neutral outline、破壊的な確認には TRIntent.danger を使用します。

インストール

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

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

Widget deleteRackButton(BuildContext context, VoidCallback onDelete) {
  return TRButton(
    intent: TRIntent.danger,
    onPressed: () async {
      final confirmed = await showTRAlertDialog<bool>(
        context: context,
        builder: (dialogContext) => TRAlertDialog(
          title: const Text('ラックを削除しますか？'),
          description: const Text('この操作は取り消せません。'),
          actions: [
            TRButton(
              appearance: TRAppearance.outline,
              onPressed: () => Navigator.pop(dialogContext, false),
              child: const Text('キャンセル'),
            ),
            TRButton(
              intent: TRIntent.danger,
              onPressed: () => Navigator.pop(dialogContext, true),
              child: const Text('ラックを削除'),
            ),
          ],
        ),
      );
      if (confirmed == true) onDelete();
    },
    child: const Text('ラックを削除'),
  );
}

例

破壊的な操作の確認 パーマリンク

安全なキャンセルを先に、danger の確認操作を最後に配置します。ルートは Navigator.pop に渡した型付きの値を返します。

ラベル、無効状態、フォーカス パーマリンク

狭い幅では長いラベルが折り返され、無効なトリガーはルートを開きません。Escape またはキャンセルで閉じると、フォーカスはトリガーへ戻ります。

長い本文 パーマリンク

AlertDialog もオーバーフローのスクロールを管理するため、呼び出し側はスクロールビューを入れ子にせず内容をそのまま渡します。判断アクションはソフトウェアキーボードの上に表示されたままです。

API

TRAlertDialog

Prop型 / デフォルト用途
actionsList<TRButton> = const []トークン間隔、折り返し、末尾揃えで配置するボタン一覧です。

showTRAlertDialog<T>

Prop型 / デフォルト用途
route optionsuseSafeArea, useRootNavigator, requestFocus, routeSettings, anchorPointsafe area、navigator、初期フォーカス、ルート情報、折りたたみ端末の基準点を制御します。