AX - ボタンメニュー
概要
AX - ボタンメニュー ユーザーが Experience Sites ページ上のボタンをクリックするとドロップダウンメニューを表示する Experience Cloud コンポーネントです。
ユーザーアクション、クイックリンク、エクスポートオプション、レコードアクションなど、関連する操作やナビゲーションオプションを 1 つのボタンの下にまとめるのに使用します。メニュー項目は手動で設定することも、Experience Builder で Salesforce データから動的に取得することもできます。
コンパクトなナビゲーション、オーバーフローメニュー、ユーザープロファイルの操作、一括操作、またはページを個別のボタンで煩雑にせずに複数のオプションが必要なあらゆる場面に最適です。
ボタンメニュー設定
Button Menu コンポーネントを使用すると、ボタンクリックで起動するドロップダウンメニューを作成できます。サイトのニーズに合わせてカスタマイズする方法は次のとおりです。
ラベル
機能: ボタンに表示されるテキストを設定します。
例： 「ナビゲーション」「アクション」「詳細を見る」
アイコン
機能: ボタンに視覚的なアイコンを追加します。
使い方: Lightning Design System で利用可能なアイコンから選択します。
オプション: アイコンが不要な場合は空欄のままにできます。
ボタンスタイル
機能: サイトの見た目に合わせて、ボタンの外観を変更します。
オプション:
ニュートラル
ブランド
破壊的（削除などの操作用）
成功（肯定的な操作用）
その他...
外観設定を調整することで、ボタンの見た目をさらに細かく設定できます。たとえば、「Container」バリアントを選択してボタンの背景色を好みに変更したり、サイト用に事前定義されたカラートークンを選択したりできます。
メニューの配置
機能: ドロップダウンメニューがボタンに対してどこに表示されるかを決定します。
オプション:
左
右
中央
左下
その他...
メニューの起動方法
機能: メニューの開き方を制御します。
オプション:
クリック
ホバー（マウスオーバーで開く）
フォーカス（キーボードフォーカスで開く）
ツールチップ
機能: ユーザーがボタンにカーソルを合わせると、役立つ情報を表示します。
オプション: 追加の説明が不要な場合は空欄のままにします。
下矢印を非表示
機能: 通常メニューボタンに表示される下向きの矢印を削除します。
オプション: よりすっきりした見た目にしたい場合は、このボックスをオンにします。
全幅に拡張
機能: ボタンを拡大して、利用可能な幅全体を占めるようにします。
オプション: より大きなボタンにしたい場合は、このボックスをオンにします。
ボタンを無効化
機能: ボタンとメニューを一時的に使用不可にします。
オプション: ユーザーが操作できないようにする場合は、このボックスをオンにします。
メニュー ヌビン
メニュー ヌビンは、ボタンメニュー内のメニュー項目の横にある小さく控えめな三角形です。
メニュー項目とメニューを開くボタンを視覚的につなぎ、ユーザーの視線を誘導します。
これにより、どのメニュー項目が特定のボタンに関連付けられているかをユーザーがすばやく識別でき、全体的なユーザーエクスペリエンスが向上します。
メニュー項目
機能: ドロップダウンメニュー内のリンクまたは操作を定義します。
使い方: ラベル（表示されるテキスト）と、必要に応じてアイコンを追加します。
項目のナビゲーションを設定
ボタンメニューをインタラクティブにするには、誰かがクリックしたときに各メニュー項目がどこへ移動するかを指定する必要があります。これは「リンク先」セクションで行います。詳細については、 起動できるさまざまな種類の操作 をこちらのボタンメニューから確認できます。
外観設定
これらの設定により、サイトのデザインとブランドに合わせてボタンメニューを視覚的にカスタマイズできます。
間隔
機能: ボタンの周囲のスペースを調整します。
使い方: スライダーまたは数値入力を使用して、上、下、左、右の余白値を調整します。
ラベルとアイコン
色： ボタンがアクティブなとき（クリック時またはホバー時）のデフォルト色と、ホバー色を選択します。
フォントファミリー： ラベルテキストのフォントを選択します（例: Arial、Times New Roman、Verdana）。
フォントサイズ： スライダーまたは数値入力を使用して、ラベルテキストのサイズを調整します。
フォントスタイル: 通常、斜体、またはオブリークのテキストを選択します。
フォントの太さ： テキストの太さを、ライト、レギュラー、ミディアム、ボールド、またはエクストラボールドから選択します。
横方向の配置: アイコンをラベルテキストの左に配置するか右に配置するかを決めます。
背景
色： ボタンがアクティブなときの背景のデフォルト色と、非アクティブ時のホバー色を選択します。
ボーダー
ボタンがアクティブなときのデフォルト色と、ボタン周囲の枠線のホバー色を選択します。
サイズ： スライダーまたは数値入力を使用して、枠線の太さを調整します。
スタイル: 実線、破線、点線、二重線のいずれかを選択します。
半径： スライダーまたは数値入力を使用して、角の丸みを調整できます（値が高いほど角がより丸くなります）。
画像（メニュー項目用）
色付きの枠線: メニュー項目の画像の周囲にある枠線の色を選択します（ある場合）。
サイズ： スライダーまたは数値入力を使用して、メニュー項目の画像サイズを調整します。
スタイル設定: 画像キャプション（ある場合）の通常、斜体、またはオブリークのスタイルを選択します。
半径： スライダーまたは数値入力を使用して、メニュー項目画像の角の丸みを調整します。
オブジェクトのフィット： 画像をコンテナ内にどのように収めるかを決めます（例: fill、contain、cover）。
重要な考慮事項
スタイル設定: サイトのブランディングに合わせて、ボタンメニューの見た目をカスタマイズします。
リンク先: メニュー項目に対するユーザー操作を処理するために、「リンク先」のインタラクションを追加することを検討してください。
最終更新
役に立ちましたか？