YouTube ChannelSchedule a CallSubscribe for Updates

ボタングループ

概要

Avonni Button Group コンポーネントは、複数のボタンをグループ化することで Salesforce Experience Cloud サイト内のユーザー操作を向上させます。このコンポーネントはサイトのナビゲーションを合理化し、操作を簡素化して、より洗練され直感的なユーザー体験を作ります。

ボタングループの設定

次の手順に従って、Avonni Button Group コンポーネントを Experience Cloud サイトのデザインと機能に合うように調整してください：

主要設定

行として表示

この設定を有効にすると、ボタンが画面上に水平に並びます。無効にするとボタンが垂直に積み重なります。

表示ボタン数

この設定は画面上に直接表示される最大ボタン数を決定します。指定数より多いボタンがある場合、残りは便利なドロップダウンメニューに配置されます。

ボタンメニュー

  • ラベル： 追加のボタンを含むドロップダウンメニューを開くボタンに表示されるテキストを設定します。

  • アイコン名： ボタンメニューで適切なアイコンを選択してください（利用可能なアイコンは Salesforce Lightning Design System を参照）。

  • バリアント： ボタンメニューの視覚スタイルを選択します（例：'neutral'、'brand'、'inverse'）。

  • メニューの位置合わせ： ドロップダウンメニューがボタンに対してどのように配置されるかを選択します（'left' または 'right'）。

ボタン

  • ラベル： ボタンに表示したいテキストを入力してください。

  • アイコン名： 必要に応じて、ボタンに配置するアイコンを選択してください。

  • アイコンの位置： アイコンをラベルの 'left' または 'right' に配置するかを指定します。

  • バリアント： ボタンの外観は事前定義されたスタイル（'neutral'、'brand'、'destructive' など）から選択できます。

  • 無効化： ボタンを初期状態で無効にしてユーザーの操作を防ぎたい場合はこの設定を有効にしてください。

  • 隠す： ボタンを初期状態で非表示にしたい場合はこの設定を有効にしてください。

  • クリック時のインタラクション： この重要なセクションでは、ユーザーがボタンをクリックしたときに何が起こるかを定義できます。可能なアクションと設定の包括的な一覧については「クリック時のインタラクション」ドキュメントページを参照してください。

重要な考慮事項

  • ボタングループは明確な視覚的階層を念頭にデザインしてください。主要なアクションを強調するには 'brand' バリアントを使用してください。

  • 'destructive' バリアントは重大な結果を伴うアクションに対してのみ控えめに使用してください。

  • ボタンのラベルは簡潔で、その機能を正確に説明するようにしてください。

  • 異なるデバイスやブラウザでボタングループの設定を常に十分にテストして、最適なユーザー体験を確保してください。

スタイリングの外観

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

ラベル/アイコン

  • color： デフォルトのテキストまたはアイコンの色を設定します。

  • color active： ボタンがアクティブ（クリックまたはフォーカス）なときのテキストまたはアイコンの色を設定します。

  • color hover： ユーザーがマウスをボタン上にホバーしたときのテキストまたはアイコンの色を設定します。

  • font family： ボタンテキストに使用するフォントを指定します。

  • font size： ボタンテキストのサイズを制御します。

  • font style： フォントスタイルを設定します（例：normal、italic、oblique）。

  • font weight： ボタンテキストの太さを決定します（例：normal、bold、bolder）。

背景

  • color： ボタンのデフォルト背景色を設定します。

  • color active： ボタンがアクティブなときの背景色を設定します。

  • color hover： ユーザーがマウスをボタン上にホバーしたときの背景色を設定します。

ボーダー

  • color： デフォルトのボーダー色を設定します。

  • color active： ボタンがアクティブなときのボーダー色を設定します。

  • color hover： ユーザーがマウスをボタン上にホバーしたときのボーダー色を設定します。

  • size： ボーダーの幅を制御します。

  • style： ボーダーのスタイルを指定します（例：solid、dashed、dotted）。

使用例

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

ラベル/アイコン：
   color：white
   color hover：#f5f5f5 

背景：
   color：red 

ボーダー： 
   color：red

重要な注意事項

  • 希望するカラーコードを見つけるにはウェブのカラーピッカーやジェネレーターを使用してください。

  • Experience Cloud サイトの全体的なデザインやカラースキームとの一貫性を保つように努めてください。

  • 期待する視覚効果とアクセシビリティを確保するために、スタイリングの変更は必ずテストしてください。

最終更新

役に立ちましたか？