ボタン

Avonni ボタンコンポーネントは、アクションの開始、ページの移動、特定の機能の実行のためのカスタマイズ可能なボタンを提供します。

設定 あなたのボタン

ラベルを追加

ラベルはボタンに表示されるテキストです。ボタンの目的とユーザーがクリックしたときに何が起こるかを明確に伝えるべきです。

• ベストプラクティス：

  • 簡潔でアクション指向のラベルを使用してください（例：「保存」「送信」「キャンセル」「詳細」）。

  • 「ここをクリック」のような一般的すぎるラベルは避けてください。

  • ラベルがボタンの機能を正確に反映していることを確認してください。

スタイル（バリアント）を選択

デザインとボタンの意図された目的に合った視覚スタイルを選択します。「バリアント」設定は、色、背景、境界線、全体的なスタイルなど、ボタンの外観を制御します。

利用可能なバリアント：

• ベア： 最小限のスタイリングのテキストのみのボタンで、さりげない操作に適しています。

• ベア（インバース）： 色が反転したベアボタンで、暗い背景での使用に最適です。

• ベース： 単色の背景を持つ標準的なボタンで、一般的な用途に適しています。

• ボーダー： 目に見える境界線と透明な背景を持つボタンで、重要度が低めの操作に便利です。

• ボーダー・フィルド： 境界線と単色の背景を持つボタンで、視認性とスタイルのバランスが良いです。

• その他多数！ コンポーネントのプロパティパネルで全バリアントを確認して、デザインに最適なものを見つけてください。

アイコンでボタンを強化し、操作を補強したり、視覚的な魅力を高めたりします。

• アイコンライブラリ： 膨大なアイコンライブラリから、ボタンの目的に合ったアイコンを選択してください。

• サイズと位置： アイコンのサイズを調整し、ラベルテキストの左または右に配置します。

インタラクションを定義

ここでボタンが機能を発揮します！「インタラクション」タブでは、ユーザーがボタンをクリックしたときに何が起こるかを定義できます。Avonniは次のような幅広い組み込みインタラクションを提供します：

• ナビゲーションとユーザーフィードバック：

  • フローナビゲーション： 画面の流れを制御し、ユーザーをシームレスに画面間で誘導します。

  • トーストを表示： トーストメッセージでユーザーに非侵襲的なフィードバックを提供します。

  • クリックされた項目が表すレコードの詳細ページに移動します。通常、ナビゲートアクションでは Salesforce内のさまざまなページや外部のウェブサイトへのリンク。

• データ操作：

  • ダウンロード： レコードに関連付けられたファイルをユーザーがダウンロードできるようにします。

  • エクスポート先： ユーザーがデータをExcelやCSV形式でエクスポートできるようにします。

  • レコードを更新： 行われた変更を自動的に保存します。

  • レコードをコピー： データテーブルのレコードからデータをコピーできるようにします。

• ユーザーエンゲージメントとフロー制御：

  • アラートモーダルを開く： ユーザーの確認を必要とする重要なメッセージを表示します。

  • 確認ダイアログを開く： ユーザーの確認プロンプトで意図しない操作を防ぎます。

  • フローダイアログを開く： 事前定義されたSalesforceフローを起動します。

  • フローパネルを開く： 別のフローを表示するためのパネルをスライドインで表示します。

  • 紙吹雪を発射： 紙吹雪のアニメーションでユーザーの操作を祝います。

• データの更新：

  • クエリを更新： Avonniコンポーネントに表示されているデータを更新します。

  • すべてのクエリを更新： クエリデータソースからのすべてのデータを更新します。

• クイックアクション：

  • クイックアクションを開く： 標準またはカスタムのSalesforceアクションに素早くアクセスします。