List Item (リスト項目)

List Item を使用して、テキスト、アイコン、画像、および Switch や Checkbox などのコンポーネントを含む List コンポーネントに繰り返し情報を表示し、ユーザーが可能なアクションを実行できるようにします。List Item は、Ignite UI for Angular List コンポーネントと視覚的に同じものです。

List Item のデモ

タイプ

Sketch と Figma では、List Item には次の 3 つのプリセットタイプがあります: グループの見出しを定義する Header、1 行のテキストを含む短い項目の One-line、プライマリおよびセカンダリテキストをサポートするより高さのある項目の Two-line。プリセットが 2 つしかない Adobe XD では、同じ以上のことを実現できるため、Header と Item タイプのみがあります。

Note

リスト項目が 3 または 4 行で構成されている場合に適切に配置するには、Avatar と Actions を手動で調整して先頭に配置する必要があります。この位置合わせは予期された動作とみなされます。現在、これは Figma Indigo.Design システムで可能であり、これらの調整は簡単にアクセスでき、実現可能です。

この上部の配置を実現するには、State フレームと Thumbnail フレームを top left (左上) に設定する必要があります。まれに、Secondary Actions をテキストコンテナーと操作アイコンで構成する必要がある場合は、Secondary Actions フレームを top right (右上) に設定する必要もあります。

状態

Items は、次のインタラクティブ状態をサポートします: 通常の状態では非アクティブ、選択した状態ではアクティブです。Figma では、状態は右側のサイドバーの State プロパティの下にあります。Sketch では、これを Symbol Overrides で実現していますが、Adobe XD では Component States パラダイムを使用して簡単に状態を切り替えることができます。Header List Item は選択できないため、そのような状態はサポートしません。

領域

Figma と Sketch では、List Item には 2 つの異なる領域があります: Avatar やテキストなどの非インタラクティブコンテンツを使用した Primary Action と、List Item に関連するクイックアクションを使用した Secondary Action。Primary Action と Secondary Action を任意に組み合わせると、リストのすべての項目で一貫して使用する必要がある一意のリスト項目テンプレートが作成されます。

Adobe XD では、リスト項目には、Avatar、Progress bar、テキストなどの非インタラクティブコンテンツが配置されたグループと、項目の右側にアクション可能なアイコンを含む Actions コンポーネントがあります。どちらの領域でも、Libraries パネルから任意のコンポーネントをドラッグして、テンプレート内のコンポーネントや項目自体を破棄することなく、必要なレイアウトを作成できます。

Figma と Sketch の Primary Action

交換可能な List Item Primary Action (リスト項目プライマリアクション) は、Figma の Type プロパティで 5 つ、Sketch の Symbol Overrides で4 つ利用できます。Sketch の Smart Layout のおかげで、不要な要素を ~No Symbol に設定することで、List Item をさらに調整することができます。


Avatar + Label + Description
Checkbox + Label		List Item 内の Checkbox に独自のラベルを付けることはできないため、前後のラベルは Sketch で ~No Symbol に設定され、ラベルレイヤーは Adobe XD に存在しません。この設定は変更するべきではありません。
Icon + Label + Desc
Label + Progress		List Item 内の Linear Progress Bar に値ラベルを付けることはできないため、Sketch では ~No Symbol に設定され、Adobe XD には値ラベルレイヤーが存在しません。この設定は変更するべきではありません。
Label

Figma と Sketch の Secondary Action

Figma と Sketch には、交換可能な List Item Secondary Action が 4 つあります。Figma では、これらは Secondary Action 基本コンポーネントのプロパティで利用でき、ケースや必要に応じて切り替えたり、オン/オフしたりできます。Figma の自動レイアウトは、選択したプロパティに基づいてコンポーネントを自動的に調整します。Sketch では、Secondary Actions は Symbol Overrides として利用でき、Smart Layout のおかげで、不要な要素を ~No Symbol に設定することでさらに調整できます。


Badge
Checkbox		List Item 内の Checkbox にラベルを付けることはできません。そのため、前後のラベルは Sketch で ~No Symbol に設定され、Adobe XD ではラベルレイヤーが存在しません。この設定は変更するべきではありません。
Text and Icon		テキストとアイコンは独立して使用できます。Figma では、Text Container のオンとオフを切り替えて、一方または両方のアイコンを非表示にすることができます。Sketch では、アイコンを ~No Symbol に設定すると非表示になります。
Toggle/Switch		List Item 内の Switch にはラベルを付けることはできません。そのため前後のラベルは、Figma では非表示になり、Sketch では ~ No Symbol に設定され、Adobe XD ではラベルレイヤーが存在しません。この設定は変更するべきではありません。

Adobe XD の Thumbnail (サムネイル)

Adobe XD の左側の List Item 領域にある Thumbnail コンポーネントは、Component States パラダイムを介して 3 つの交換可能なオプションを提供し、それらを簡単に切り替えることができます。これにより、Sketch の各 Primary Action に一致するデザインを作成できます。

Adobe XD の Actions

Adobe XD の適切な List Item 領域を構成する Actions コンポーネントは、Component States パラダイムを介して 4 つの交換可能なオプションを提供し、それらを簡単に切り替えることができます。これにより、Sketch の各 Secondary Action に一致するデザインを作成できます。

スタイル設定

List Item には、アイコン、テキスなどのさまざまな要素および Avatar、Badge、Checkbox、Icon、Progress、Switch などのコンポーネントで使用できるオプションを通じて、スタイルの柔軟性があり、それぞれに独自のスタイル機能があります。