Alert

Alertコンポーネントは、ユーザーに重要な情報を伝える際に使用する通知コンポーネントです。モダンなガラス効果とスムーズなアニメーションを提供します。

基本的な使用方法

情報

これは情報アラートです。重要な情報を伝える際に使用します。

成功

操作が正常に完了しました！

注意

この操作は元に戻せません。慎重に進めてください。

エラー

エラーが発生しました。もう一度お試しください。

Props

Prop	Type	Default	Description
type	'info' | 'success' | 'warning' | 'error'	'info'	アラートのタイプ
title	string	-	アラートのタイトル (オプション)
icon	string	-	カスタムアイコン (オプション)

使用例

基本的なアラート

<Alert type="info">これは基本的な情報アラートです。</Alert>

タイトル付きアラート

<Alert type="success" title="インストール完了">
  パッケージが正常にインストールされました。
</Alert>

カスタムアイコン

<Alert type="warning" title="注意" icon="🚨">
  この操作は元に戻せません。
</Alert>

エラーメッセージ

<Alert type="error" title="エラー発生" icon="💥">
  ネットワーク接続に失敗しました。インターネット接続を確認してください。
</Alert>

特徴

✨ モダンデザイン

• ガラス効果: backdrop-filter: blur(20px) を適用
• グラデーション背景: 各タイプ別の美しいグラデーション効果
• ソフトシャドウ: 多層シャドウで深さを表現
• ホバーアニメーション: translateY(-2px) 変換とアイコンバウンス効果

🎨 タイプ別特徴

• Info: 青色グラデーション、情報配信用
• Success: 緑色グラデーション、成功メッセージ用
• Warning: オレンジ色グラデーション、注意事項用
• Error: 赤色グラデーション、エラーメッセージ用

🌙 ダークモードサポート

• 自動色調整
• 一貫したユーザー体験
• 完璧なテーマ互換性

📱 レスポンシブデザイン

• モバイルで最適化されたサイズ
• 適応型パディングとフォントサイズ
• タッチフレンドリーなインターフェース

💫 アニメーション効果

• アラートフェードイン: ページ読み込み時のスムーズな登場
• ホバー効果: マウスオーバー時の自然な変換
• アイコンバウンス: ホバー時のアイコンバウンスアニメーション
• スムーズトランジション: すべての状態変化に自然なトランジション

🎯 アクセシビリティ

• 明確な色の区別
• 適切なコントラスト比
• スクリーンリーダー互換
• キーボードナビゲーションサポート

スタイリング

Alertコンポーネントは CSS 変数を通じてカスタマイズできます：

:root {
  --page-alert-border-radius: 16px;
  --page-alert-padding: 20px 24px;
  --page-alert-gap: 16px;
}

ブラウザサポート

• Chrome 88+
• Firefox 85+
• Safari 14+
• Edge 88+

モダンブラウザで最適なパフォーマンスを提供します。