List (リスト)

List コンポーネントは、ユーザーのブラウジングやテキスト、アイコン、画像、ボタンやアバターなどのコンポーネントを含むテンプレート項目の一連の垂直コレクションとのインタラクションを可能にします。List は、Ignite UI for Angular List コンポーネントと視覚的に同じものです。

List のデモ

タイプ

List は、1 行項目または 2 行項目のプリセットに挿入できます。どちらも最初は 10 項目を含みます。

Sketch で List を使用

List は、本来インデックス付きの垂直コレクションとしてデータを表示する行のリピーターです。項目に Smart Layout を使用しているため、1 つ以上の項目を ~No Symbol に設定することで、サイズを調整できます。より多くの項目を含むリストをデザインする必要がある場合、最も簡単な方法は、アートボードに List タイプのいずれかを挿入し、その上を右クリックして、コンテキストメニューの下部にある Detach from Symbol を選択することです。新しく表示された List/One-line Item List または List/Two-line Item List グループの下のレイヤーパネルに、次のように表示されます:

レイヤー	使用
🚫 metadata	禁止されたアイコンで開始する特定のロックされたレイヤー。このレイヤーはコード生成に必要なため、削除または変更しないでください。
List Header	リストヘッダー項目のインスタンス
1 Item	1 行 / 2 行リスト項目のインスタンス
2 Item	1 行 / 2 行リスト項目のインスタンス
3 Item	1 行 / 2 行リスト項目のインスタンス
4 Item	1 行 / 2 行リスト項目のインスタンス
5 Item	1 行 / 2 行リスト項目のインスタンス
6 Item	1 行 / 2 行リスト項目のインスタンス
7 Item	1 行 / 2 行リスト項目のインスタンス
8 Item	1 行 / 2 行リスト項目のインスタンス
9 Item	1 行 / 2 行リスト項目のインスタンス
10 Item	1 行 / 2 行リスト項目のインスタンス
🌈 Background	リストの背景色を定義

これで、メニューから、または単に既存のものを複製することによって、追加のヘッダーまたは項目を挿入できます。常に項目とヘッダーを同じ水平幅と配置で次々に配置し、項目間にギャップがないようにします。

Adobe XD で List を使用

Adobe XD では、List コンポーネントをアートボードにドラッグした後、不要な項目を削除するだけで項目の数を減らしたり、既存の項目の 1 つを複製して項目の数を増やしたりできます。リストは項目を Stack に配置するため、項目を追加または削除すると、項目は自動的に垂直方向に整列および分散されます。リスト内の位置を変更するには、目的の位置まで上下にドラッグする必要があります。Sketch とは異なり、Adobe XD では、シンボルを破棄する必要はありません。

スタイル設定

List は、さまざまなオプションを通じて背景色、アイコン、テキストなどの List 項目に使用するさまざまな要素、Avatar、Badge、Checkbox、Icon、Progress、Switch などのコンポーネントなどを柔軟にスタイル設定できます。

使用方法

List および List Items には固有のデザインがありますが、List は同様の項目のコレクションで、通常以下の共通テンプレートを使用します。従って同じリスト内で複数のテンプレートを組み合わせないようにします。要素を非表示にせずに、特定のコンテンツタイプがない場合にプレースホルダーまたは空要素を表示します。テンプレートを構成する要素は垂直方向に継続的に形成する必要があるため、配置に注意が必要です。

良い例	悪い例