# AX - ボタンダイアログ

## 概要

**AX - ボタンダイアログ** Experience Cloud コンポーネントで、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%2FHuw6jLzTv5LMkDyS3Xla%2F2023-11-07_15-55-13%20(1).gif?alt=media&#x26;token=688f18fe-8276-4044-b8b6-fd68f4f509cb" alt=""><figcaption></figcaption></figure>

***

## Avonni ボタンダイアログの設定

### **ボタンダイアログを良くするために**

1. **コンポーネントを追加：** Avonni Button Dialog コンポーネントを見つけて、ウェブサイトにドラッグします。
2. **見た目を良くする：** ボタンのテキスト（ラベル）、色のスタイル（バリアント）、その他の視覚的な詳細を変更できます。
3. **クリックして作成：** ボタンをクリックするとポップアップボックス（モーダル）が表示されます。このボックスには Avonni Video コンポーネントなど、さまざまなコンテンツをドラッグして配置できます。

### **追加設定**

* **ヘッダーを非表示：** ポップアップボックス上部のタイトルバーを削除します。
* **サイズ：** ポップアップボックスの大きさを選択します。
* **フッターを表示：** ポップアップ下部にセクションを追加します。"OK" や "キャンセル" のようなボタンに便利です。
* **コンテンツプルパディング：** ボックス内の要素とボックス端との間のスペースを制御します。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F6lPzeg4VxJc8x4Oi8oea%2F2024-03-16_12-31-56.png?alt=media&#x26;token=ece654e2-58a4-4856-9f29-cb563de6f91a" alt=""><figcaption></figcaption></figure>

***

## 設定

{% tabs %}
{% tab title="ボタン設定" %}

| 名前           | 説明                                                                       |
| ------------ | ------------------------------------------------------------------------ |
| **ラベル**      | ボタンに表示されるテキスト。                                                           |
| **アイコン名**    | ボタンに表示するアイコンの Lightning Design System の名前。                               |
| **アイコン位置**   | ラベルに対するアイコンの位置。オプションは「left」または「right」です。                                 |
| **バリアント**    | Salesforce Design System に定義されたスタイルに従い、'brand'、'neutral' などボタンの外観を定義します。 |
| **水平配置**     | コンテナ内でボタンを水平に配置します。オプションには「left」、「center」、「right」が含まれます。                 |
| **ストレッチ**    | ボタンがコンテナの幅に合わせて拡張するかどうかを決定します。                                           |
| **無効**       | ボタンを無効にしてユーザー操作を防ぎます。                                                    |
| {% endtab %} |                                                                          |

{% tab title="ダイアログ設定" %}

| 名前           | 説明                                                          |
| ------------ | ----------------------------------------------------------- |
| **ヘッダーを非表示** | ダイアログのヘッダーの表示/非表示を切り替えます。                                   |
| **サイズ**      | ダイアログのサイズを設定します。オプションには '`small`', '`medium`'、または '`large`. |
| **フッターを表示**  | アクションボタンなどを含むダイアログのフッターを表示するかどうかを決定します。                     |

{% endtab %}

{% tab title="🎨 スタイリング" %}

| 名前        | 説明                          |
| --------- | --------------------------- |
| **ヘッダー**  | ダイアログのヘッダーの背景色を指定します。       |
| **コンテンツ** | ダイアログのメインコンテンツ領域の背景色を設定します。 |
| **フッター**  | フッター領域の背景色を定義します。           |

{% endtab %}
{% endtabs %}