# AX - ボタングループ

## 概要

**AX - ボタングループ** Experience Cloud コンポーネントで、Experience Sites のページ上で複数の関連ボタンを統一されたグループとして表示します。

「保存」と「キャンセル」や「編集」と「削除」、または異なるセクションへのナビゲーションオプションのように、関連するアクションを横並びで提示するために使用します。ボタンは視覚的に一つのユニットとして結び付けられ、関連する選択肢であることが明確になります。

フォームの操作、レコード管理オプション、タブのようなナビゲーション、またはポータルユーザーが複数の関連アクションから選択する必要があるあらゆる場所に最適です。

***

## ボタングループの設定 <a href="#use-cases-and-examples" id="use-cases-and-examples"></a>

以下の手順に従って、Avonni ボタングループコンポーネントを Experience Cloud サイトのデザインと機能に合わせて調整してください：

### **主要設定**

#### **行として表示**

この設定を有効にすると、ボタンが画面に横方向に配置されます。無効にするとボタンは縦に積み重ねられます。

#### **表示ボタン数**

画面上に直接表示される最大ボタン数を指定します。指定された数を超えるボタンがある場合、残りは便利なドロップダウンメニューに入ります。

#### **ボタンメニュー**

* **ラベル：** 追加のボタンを含むドロップダウンメニューを開くボタンに表示するテキストを設定します。
* **アイコン名：** ボタンメニューで適切なアイコンを選択します（利用可能なアイコンは Salesforce Lightning Design System を参照してください）。
* **バリアント：** ボタンメニューの視覚スタイルを選択します（例：「neutral」「brand」「inverse」など）。
* **メニューの位置合わせ：** ドロップダウンメニューがボタンに対してどのように配置されるかを選択します（「left」または「right」）。

#### **ボタン**

* **ラベル：** ボタンに表示したいテキストを入力してください。
* **アイコン名：** 必要に応じて、ボタンに配置するアイコンを選択できます。
* **アイコン位置：** アイコンをラベルの「左」または「右」に配置するかを指定します。
* **バリアント：** 事前定義されたスタイル（「neutral」「brand」「destructive」など）からボタンの外観を選択できます。
* **無効化：** ボタンを初期状態で無効にしてユーザー操作を防ぎたい場合は、この設定を有効にします。
* **非表示：** ボタンを初期状態で表示しないようにしたい場合は、この設定を有効にします。
* **クリック時のインタラクション：** この重要なセクションでは、ユーザーがボタンをクリックしたときに何が起こるかを定義できます。可能なアクションと設定の包括的な一覧については「クリック時のインタラクション」ドキュメントページを参照してください。

### **重要な考慮事項**

* ボタングループは明確な視覚的階層を意識して設計してください。主要なアクションを強調するには「brand」バリアントを使用します。
* 重大な結果を伴うアクションには「destructive」バリアントを控えめに使用してください。
* ボタンラベルは簡潔にし、その機能を正確に表すようにしてください。
* 最適なユーザー体験を確保するため、異なるデバイスとブラウザでボタングループの設定を必ず十分にテストしてください。

***

## スタイリングと外観 <a href="#use-cases-and-examples" id="use-cases-and-examples"></a>

Avonni ボタングループコンポーネントは、Experience Cloud サイト内での外観をカスタマイズするための包括的なスタイリングオプションを提供します。以下は利用可能なスタイリング属性の内訳です：

<details>

<summary>ラベル／アイコン</summary>

* **色：** デフォルトのテキストまたはアイコンの色を設定します。
* **色（アクティブ）：** ボタンがアクティブ（クリックまたはフォーカス）なときのテキストまたはアイコンの色を設定します。
* **色（ホバー）：** ユーザーがマウスをボタンに重ねたときのテキストまたはアイコンの色を設定します。
* **フォントファミリー：** ボタンテキストに使用するフォントを指定します。
* **フォントサイズ：** ボタンテキストの大きさを制御します。
* **フォントスタイル：** フォントスタイルを設定します（例：normal、italic、oblique）。
* **フォントウェイト：** ボタンテキストの太さを決定します（例：normal、bold、bolder）。

</details>

<details>

<summary>背景</summary>

* **色：** ボタンのデフォルトの背景色を設定します。
* **色（アクティブ）：** ボタンがアクティブなときの背景色を設定します。
* **色（ホバー）：** ユーザーがマウスをボタンに重ねたときの背景色を設定します。

</details>

<details>

<summary>ボーダー</summary>

* **色：** デフォルトのボーダー色を設定します。
* **色（アクティブ）：** ボタンがアクティブなときのボーダー色を設定します。
* **色（ホバー）：** ユーザーがマウスをボタンに重ねたときのボーダー色を設定します。
* **サイズ：** ボーダーの幅を制御します。
* **スタイル：** ボーダーのスタイルを指定します（例：solid、dashed、dotted）。

</details>

***

### **使用例**

赤い背景、白いテキスト、およびさりげないホバー効果を持つボタングループを作成するには、次の構成を検討してください：

```
ラベル／アイコン：
   色：白
   色（ホバー）：#f5f5f5 

背景：
   色：赤 

ボーダー： 
   色：赤  
```

### **重要な注意事項**

* 希望するカラーコードを見つけるにはウェブのカラーピッカーやジェネレーターを使用してください。
* Experience Cloud サイト全体のデザインとカラースキームとの一貫性を心がけてください。
* 望ましい視覚効果とアクセシビリティを確保するため、スタイリングの変更は必ずテストしてください。