ボタンメニュー

概要

Avonni ボタンメニューコンポーネントは、ボタンで起動する柔軟なドロップダウンメニューにより、Experience Cloud サイトのナビゲーションを強化します。カスタマイズ可能なスタイリング、直感的な挙動、動的なデータソースを組み合わせて、サイトのニーズに合わせた使いやすいメニューを作成します。

ボタンメニュー設定

ボタンメニューコンポーネントを使うと、ボタンクリックで起動するドロップダウンメニューを作成できます。サイトのニーズに合わせてカスタマイズする方法は次のとおりです：

ラベル

• 機能概要： ボタンに表示されるテキストを設定します。

• 例： 「ナビゲーション」「アクション」「詳細」など。

アイコン

• 機能概要： ボタンに視覚的なアイコンを追加します。

• 使い方： Lightning Design System にある利用可能なアイコンから選択します。

• オプション： アイコンを使いたくない場合は空欄にできます。

ボタンスタイル

• 機能概要： サイトの外観に合わせてボタンの見た目を変更します。

• オプション：

  • ニュートラル

  • ブランド

  • 破壊的（削除などの操作用）

  • 成功（肯定的な操作用）

  • 詳細...

外観設定を調整することで、ボタンの見た目をさらに個別化できます。たとえば「コンテナ」バリアントを選んでボタンの背景色を好みに合わせて変更したり、サイト用に事前定義されたカラートークンを選択できます。

メニューの位置合わせ

• 機能概要： ドロップダウンメニューがボタンに対してどこに表示されるかを決定します。

• オプション：

  • 左

  • 右

  • 中央

  • 左下

  • 詳細...

メニュー起動方法

• 機能概要： メニューの開き方を制御します。

• オプション：

  • クリック

  • ホバー（マウスオーバーで開く）

  • フォーカス（キーボードフォーカスで開く）

ツールチップ

• 機能概要： ユーザーがボタンにホバーしたときに役立つ情報を表示します。

• オプション： 追加の説明が不要な場合は空欄にしてください。

下向き矢印を非表示にする

• 機能概要： 通常メニューボタンに表示される下向き矢印を取り除きます。

• オプション： よりすっきりした見た目を好む場合はこのボックスにチェックしてください。

幅いっぱいに伸ばす

• 機能概要： ボタンが利用可能な全幅を占めるように拡張します。

• オプション： より大きなボタンにしたい場合はこのボックスにチェックしてください。

ボタンを無効化

• 機能概要： 一時的にボタンとメニューを使用不可にします。

• オプション： ユーザーが操作できないようにするにはこのボックスにチェックしてください。

メニューのヌビン

• メニューヌビンは、ボタンメニュー内のメニュー項目の横にある小さく控えめな三角形です。

• それはメニュー項目をメニューを開くボタンに視覚的に結び付け、ユーザーの視線を導きます。

• これにより、どのメニュー項目が特定のボタンに関連しているかをユーザーが素早く識別でき、全体的なユーザー体験が向上します。

メニュー項目

• 機能概要： ドロップダウンメニュー内のリンクやアクションを定義します。

• 使い方： ラベル（表示されるテキスト）と必要に応じてアイコンを追加してください。

項目のナビゲーションを設定

ボタンメニューをインタラクティブにするには、各メニュー項目がクリックされたときにどこに移動するかを指定する必要があります。これは「リンク先」セクションで行います。について詳しくは、 さまざまな種類のアクション ここでボタンメニューからトリガーできるアクションの種類について詳しく学べます。

外観設定

これらの設定により、サイトのデザインやブランドに合わせてボタンメニューの見た目を視覚的にカスタマイズできます。

間隔

• 機能概要： ボタンの周りのスペースを制御します。

• 使い方： 上、下、左、および正しい（※原文通り）スペーシング値をスライダーまたは数値入力で調整します。

ラベルとアイコン

• 色： ボタンがアクティブ（クリックまたはホバー）なときのデフォルトカラーとホバーカラーを選択します。

• フォントファミリー： ラベルテキストのフォント（例：Arial、Times New Roman、Verdana）を選択します。

• フォントサイズ： スライダーまたは数値入力でラベルテキストのサイズを調整します。

• フォントスタイル： 通常、斜体、または傾斜体を選択します。

• フォントの太さ： テキストをライト、レギュラー、ミディアム、太字、または超太字にします。

• 水平方向の配置： アイコンをラベルテキストの左または右のどちらに配置するかを決定します。

背景

• 色： ボタンがアクティブなときのデフォルトカラーと、非アクティブ時のホバーカラーを選択します。

ボーダー

ボタンがアクティブなときのデフォルトカラーと、ボタン周りのボーダーのホバーカラーを選択します。

• サイズ： スライダーまたは数値入力でボーダーの厚さを調整します。

• スタイル： ソリッド、破線、点線、または二重線のボーダーから選択します。

• 半径： スライダーまたは数値入力で角の丸みを調整できます（値が大きいほど角がより丸くなります）。

画像（メニュー項目用）

• 色付きボーダー： メニュー項目の画像（ある場合）の周りのボーダー色を選択します。

• サイズ： スライダーまたは数値入力でメニュー項目画像のサイズを調整します。

• スタイリング： 画像キャプション（ある場合）に対して通常、斜体、または傾斜体のスタイリングを選択します。

• 半径： スライダーまたは数値入力でメニュー項目画像の角の丸みを調整します。

• オブジェクトフィット： 画像がコンテナ内にどのように収まるか（例：fill、contain、cover）を決定します。

重要な考慮事項

• スタイリング： ボタンメニューの外観や操作感をサイトのブランドに合わせてカスタマイズしてください。

• リンク先： メニュー項目のユーザー操作を処理するために「リンク先」インタラクションを追加することを検討してください。