セクション
概要
Avonni Section コンポーネントは、Salesforce Dynamic Components 内でコンテンツを整理するための展開可能なセクションを作成します。内部に他の Avonni コンポーネントを追加するためのスロットが含まれており、フォーム、リスト、データ表示などの関連要素をグループ化するのに最適です。
主な機能
展開可能なデザイン： 密集したインターフェースでのユーザー体験向上のためにコンテンツの表示/非表示を切り替えます。
カスタマイズ： スタイル用のバリアント、視覚的手がかりのためのアバター、折りたたみ可能性のためのアイコンを提供します。
インタラクティビティ： アクション、進捗インジケータ、タグのサポート。
スロット統合： セクションのコンテンツ領域に他のコンポーネント（例：テキストエリア、スライダー）を埋め込めます。
ヒント
複数の展開可能なパネルでアコーディオンのような構造を作成するには、専用の Avonni Accordion コンポーネント
使用例
フォームフィールドを展開可能なパネルにグループ化します（例：「Contact Details」セクション）。
ダッシュボードのウィジェットを整理し、使用頻度の低いものを折りたたみます。
折りたたみ可能なヘルプコンテンツやFAQを表示します。
タグ付けや進捗追跡のあるセクションでレポートを構成します。
フィルター表示用のデータテーブルを含むセクションのようなネストされた UI を構築します。
構成
キャンバス上で Section を選択して、右側のプロパティパネルでプロパティにアクセスします。
基本プロパティ
これらは識別とコアラベリングを扱います。
実際の
Text
インスタンスの一意の識別子。
ContactDetailsSection
タイトル
Text
セクションの主見出し。
"Contact Information"
キャプション
テキスト（オプション）
タイトルの下の補足テキストまたは説明。
"Enter user details here."
コンテンツとスロット
これは、他の Avonni コンポーネント（例：入力、テーブル）をドラッグ＆ドロップする展開可能な領域です。直接のプロパティはなく、キャンバス上の配置で構成します。
ベストプラクティス： スロット内のコンテンツは関連性を保ち簡潔にして、展開/折りたたみ時のパフォーマンスを維持してください。
外観とバリアント
これらは視覚スタイルを制御します。
バリアント
を選択し、
ベーススタイル：base（デフォルト、クリーン）または shaded（背景にシェーディングあり）。
base、shaded。
折りたたみ可能性
これらは展開／折りたたみの動作を管理します。
Collapsible
Boolean
切り替えを有効にします。オフの場合、セクションは常に開いた状態になります。
Closed
Boolean
初期状態：オン＝折りたたまれた状態、オフ＝展開（Collapsible がオンの場合に有効）。
Collapsible Icon (Active if Collapsible is On)
トグルアイコンをカスタマイズします。
非表示
Boolean
アイコンを完全に非表示にします。
-
Open Icon Name
Text
展開時のアイコン（例：Salesforce Lightning Design System の名前）。
utility:chevronup
Close Icon Name
Text
折りたたみ時のアイコン。
utility:chevrondown
位置
を選択し、
タイトルに対するアイコンの位置。
left、right。
ヒント： 一貫性のために標準の SLDS アイコンを使用してください。（スクリーンショットのプレースホルダ：カスタムアイコン付きのセクション）
アバター
タイトルの前に視覚要素を追加します。
バリアント
を選択し、
形状：circle（丸）または square（四角）。
circle、square。
イニシャル
テキスト（オプション）
テキストオーバーレイ（例：ユーザーのイニシャル）。
"JD"
アイコン名
テキスト（オプション）
画像／イニシャルの代わりのアイコン。
standard:user
アイコンサイズ
を選択し、
アイコンまたはアバターのサイズ。
x-small、small、medium、large、x-large、xx-large。
注： 優先するのは一つ：画像、アイコン、またはイニシャル。
アクション
右側に表示されるボタンを設定してインタラクションをトリガーします（設定は Interactions Panel)。例：「Edit」、「Delete」。
進捗とタグ
これらはインジケータとメタデータを追加します。
進捗
数値
進捗バーの値（0-100）；完了状況を表示します。手動設定または計算やデータに基づく動的更新のために Number 変数にバインドできます。
75（またはマッピング先： {!completionPercent})
タグ
リスト／テキスト
カテゴリ化／検索可能性のためのコンマ区切りまたは配列のタグ。
"Priority", "Review"
ヒント
進捗については、 変数 （Resources で作成）にバインドすると、フォームの完了状況やクエリ結果に基づく更新など、リアルタイムの変更が可能になります。
例
折りたたみ可能な連絡フォームセクション
スロットコンテンツ
セクションに Contact レコードにリンクしたフォームフィールドを配置するには、先に作成した Record Variable（例：Contact オブジェクト用）を基にしてください。
手順：
キャンバス上で Section コンポーネントを選択します。
Elements パネル（通常は左または右側）で、に切り替えます。 Fields タブ—これによりバインドされた Record Variable から利用可能なフィールドが表示されます。
該当するフィールド（例：Name、Email）をキャンバス上のセクションのスロットに直接ドラッグします。
結果： アバター、進捗バー、タグ、アクションを備えたシェード付きの折りたたみ可能なセクションが作成され、展開するとフォームフィールドが表示されます。
重要な考慮点
折りたたみ論理： 初期の Closed 状態をテストし、動的切り替えのために変数にバインドします。
スロットのパフォーマンス： 展開時の遅延を防ぐために、重いコンポーネントでスロットを過負荷にしないでください。
アバターの優先順位： 写真には画像を、一般的なものにはアイコンを、個人化にはイニシャルを使用してください—一度に表示されるのは一つだけです。
アクションの統合： インタラクションがパネルで定義されていることを確認し、クリックで発火するかテストしてください。
進捗の可視化： スタイルはバリアントに合わせて使用し、セクション内のタスク追跡に利用します。
アクセシビリティ： 画像／アイコンに代替テキストを提供し、キーボードでの操作による折りたたみが可能であることを確認してください。
よくある問題のトラブルシューティング
セクションが折りたたまれない： Collapsible がオンになっているか確認し、競合する動作がないかチェックしてください。
アイコンが表示されない： Hide がオンの場合はオフに切り替え、アイコン名が有効な SLDS 名であることを確認してください。
アクションがトリガーされない： Interactions Panel の設定とバインディングを再確認してください。
進捗が表示されない： 値が 0-100 の範囲であることを確認してください。バリアントの調整が必要な場合があります。
タグが重なる： タグ数を制限するか、必要に応じてカスタム CSS でスタイルしてください。
スロットのコンテンツが見つからない： コンポーネントをキャンバスのスロットに直接ドラッグしてください。
概要
Avonni Section コンポーネントは、展開可能でカスタマイズ可能なパネルとネストされたコンポーネント用のスロットにより UI を整理します。Salesforce におけるモジュール式でインタラクティブなデザインに最適です。関連コンポーネントについては Avonni Accordion や Interactions Guide を参照してください。
最終更新
役に立ちましたか？