> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-alert.md).

# AX - アラート

## 概要

**AX - アラート** Experience Sites ページ上でポータルユーザーに重要なメッセージと通知を表示する Experience Cloud コンポーネントです。

システムアラート、エラーメッセージ、警告、成功の確認、または期限のあるお知らせを表示するために使用します。アラートを表示するタイミング、内容、見た目を制御でき、すべてコード不要で Experience Builder で設定できます。

ポータルのメンテナンス通知、フォーム送信の確認、アカウント状態のアラート、または顧客ポータルやパートナーポータルでユーザーを手順に案内するのに最適です。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-36209c85f8368a940645aedacfb9a149977ac7ec%2F2023-11-13_14-29-57.png?alt=media" alt=""><figcaption></figcaption></figure>

## 設定

### プロパティ

**バリアント** アラートの外観をカスタマイズして、伝えたいメッセージの種類をよりよく反映します。ユーザーにより分かりやすく伝えるため、届けたいメッセージに合ったものを選択してください：

| バリアント     | 使用するタイミング            |
| --------- | -------------------- |
| **ベース**   | 標準的な汎用アラート。          |
| **エラー**   | 重大な通知や問題向け。          |
| **オフライン** | 接続または可用性に関する問題を示します。 |
| **警告**    | 注意が必要だが重大ではないアラート向け。 |

**コンテンツ** アラートで伝えられる主メッセージであり、ユーザーに特定の通知や状況を確実に知らせます。より豊かなメッセージを表示する場合は、代わりにコンポーネントの content スロットを通じてカスタムマークアップを指定できます。

**アイコン名** アラートに Lightning Design System のアイコンを設定します（例： `utility:info`）、メッセージの性質や文脈を視覚的に表します。 **アイコンサイズ** アイコンの表示サイズ（XX-Small、X-Small、Small、Medium、Large）を制御し、 **アイコン名**.

**閉じることが可能** ユーザーが手動でアラートを閉じられるよう、閉じるボタンを表示します。メッセージが情報提供用で、ユーザーが先へ進めるようにすべき場合に有効にします。

**テクスチャあり** より特徴的な外観にするため、アラートにテクスチャ付きの背景パターンを適用します。

## スタイリング

アラートの外観は次からカスタマイズできます： **［スタイル］** プロパティエディタのセクションからカスタマイズします。

{% tabs %}
{% tab title="間隔" %}
アラートの余白を調整します：

* **ブロック開始:** 上余白を設定します。
* **ブロック終了:** 下余白を調整します。
* **インライン開始:** 左余白を設定します。
* **インライン終了:** 右余白を変更します。
  {% endtab %}

{% tab title="背景" %}
背景のカスタマイズを提供します：

* **色：** 背景に単色を選択します。
* **線形グラデーション:** 動的で視覚的に魅力的なグラデーション効果を求める場合に、このオプションを選択します。
  {% endtab %}

{% tab title="テキスト" %}
テキストのカスタマイズが可能です：

* **色：** 視認性を向上させるためにテキスト色を変更します。
* **フォントの太さ：** 強調するためにフォントの太さを選択します。
* **水平配置：** アラート内で最適に表示されるよう、テキストの配置を選択します。
  {% endtab %}

{% tab title="枠線" %}
枠線の外観をカスタマイズするオプションを提供します：

* **色：** 枠線の端の色を選択します。
* **太さ：** 枠線の太さを選択します。
* **スタイル：** さまざまなスタイルで全体的な見た目と雰囲気を決定します。
  {% endtab %}

{% tab title="アイコン" %}
アイコンの外観をさまざまにカスタマイズできます：

* **背景色：** アイコンの背後の背景色を変更します。
* **前景色:** アイコンのメインカラーを変更します。
* **前景の閉じるアイコン:** アラートを閉じるためのアイコンの色を指定します。
* **前景色ユーティリティ:** 視認性とコントラストを高めるために、さらに色を調整します。
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-alert.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
