オーバーレイ v2.0.0

モーダルダイアログ

背景オーバーレイ、フォーカストラップ、スムーズなアニメーションを備えたアクセシブルなモーダルダイアログ。 デフォルト、アラート、確認、プロンプトの各バリアントを用意しています。 StimulusとTailwind CSSで構築されています。

デフォルト

タイトル、コンテンツ、閉じるボタンを備えた汎用モーダルダイアログ

オプション

名前 型 デフォルト 説明
title * String 必須 Modal heading text
content String Modal body text (or pass a block)

アラート

バリアントアイコン、メッセージ、OKボタン付きのアラートダイアログ

オプション

名前 型 デフォルト 説明
variant Symbol :info Visual style: :info, :warning, :danger, :success
title * String 必須 Alert heading text
message * String 必須 Alert body message
confirm_label String "OK" Text for the confirm button

確認

アイコン、メッセージ、キャンセル/確認ボタン付きの確認ダイアログ

オプション

名前 型 デフォルト 説明
variant Symbol :info Visual style: :info, :warning, :danger, :success
title * String 必須 Confirm heading text
message * String 必須 Confirm body message
confirm_label String "Confirm" Text for the confirm button
cancel_label String "Cancel" Text for the cancel button

プロンプト

アイコン、メッセージ、入力フィールド、キャンセル/送信ボタン付きのプロンプトダイアログ

オプション

名前 型 デフォルト 説明
variant Symbol :info Visual style: :info, :warning, :danger, :success
title * String 必須 Prompt heading text
message * String 必須 Prompt body message
input_label String Label for the input field
input_placeholder String Placeholder text for the input field
input_value String "" Default value for the input field
confirm_label String "Submit" Text for the submit button
cancel_label String "Cancel" Text for the cancel button

変更履歴 v2.0.0

- v2.0.0: Converted to multi-style with alert, confirm, and prompt variants
- v1.1.0: Added ViewComponent format support
- v1.0.0: Initial release with focus trap, backdrop click to close

フルアクセスを取得

このコンポーネントと他のすべてのソースコードをアンロックしましょう。一回のお支払いで永久アクセス。

今すぐアクセスを取得