バナー

重要なメッセージ、プロモーション、警告のための常設アナウンスバー。 localStorageを使った閉じる機能の永続化、アクションボタン、複数のバリアントに対応しています。 ビューポートの上部または下部に固定表示、もしくはドキュメントフロー内にインラインで配置できます。

プレビュー & コード

オプション

名前 デフォルト 説明
message * String 必須 The banner message text
variant Symbol :info Visual style: :info, :success, :warning, or :error
dismissible Boolean false Whether the banner can be dismissed
persist_dismiss Boolean false Remember dismissal via localStorage (requires dismiss_key)
dismiss_key String nil localStorage key for persistent dismissal
action_text String nil Text for the action button/link
action_url String nil URL for the action button
position Symbol :top Banner position: :top, :bottom, or :inline
icon Boolean true Show the variant icon

変更履歴 v1.0.0

- Initial release with info, success, warning, and error variants
- Fixed top/bottom positioning and inline rendering mode
- Dismissible with optional localStorage persistence
- Optional action button/link with arrow icon
- Variant-specific icons and color schemes with dark mode support

フルアクセスを取得

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

今すぐアクセスを取得