Alert
Basic
jui-alert の最も基本的な使用例です。
Variants
variant プロパティを使用してコンポーネントの視覚的なスタイルを変更します。
Dismissible
Custom Content
概要 (Overview)
jui-alert — アラート通知コンポーネント
バリアント: info / success / warning / danger
- バリアントに応じたデフォルトアイコンを表示
- isDismissible で閉じるボタンを表示可能
プロパティ (Properties)
コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
dismissLabel | dismiss-label | 閉じるボタンのアクセシビリティラベル（i18n対応） | string | 'Dismiss' |
isDismissible | is-dismissible | 閉じるボタンの表示有無 | boolean | false |
isVisible | is-visible | アラートの表示状態（外部から再表示可能） | boolean | true |
variant | variant | アラートのバリアント | "danger" | "info" | "success" | "warning" | 'info' |
イベント (Events)
コンポーネントから発火するカスタムイベントの一覧です。
| Event | Description | Type |
|---|---|---|
juiDismiss | 閉じるボタンがクリックされた時に発火するイベント | CustomEvent<{ variant: string; }> |
スロット (Slots)
コンポーネント内に子要素を挿入するためのスロット一覧です。
| Slot | Description |
|---|---|
| アラートメッセージ（デフォルトスロット） | |
"icon" | 左側アイコン（デフォルトアイコンを上書き） |
シャドウパーツ (Shadow Parts)
CSSから直接スタイリング可能な内部要素（Parts）の一覧です。
| Part | Description |
|---|---|
"alert" | アラートコンテナ |
"content" | コンテンツ領域 |
"dismiss" | 閉じるボタン |
"icon" | アイコン領域 |
Built with StencilJS