Sparkle Design

Information List

インフォメーションリストは関連する情報を一覧の形式で並べるために使用するコンポーネントです。

Figma
Information List の概要図

Anatomy: 解剖図

Information Listの構成要素を示す解剖図。1はリストのコンテナを表すContainerを、2は内容を提示するためのスロット要素を表すleadSlotを、3はリストのタイトルを表すTitleを、4はリストの詳細を表すDescriptionを、5はリストを展開・折り畳みするためのラベルを表すLabelを、6はリストを展開・折り畳みするためのアイコン要素を表すIconを、7はコンテンツを視覚的に区切るための要素を表すDividerを示します。
ItemNameDescriptionComponentOptional
1Containerリストのコンテナ—
2leadSlot内容を提示するためのスロット要素Slot任意
3Titleリストのタイトル—
4Descriptionリストの詳細—
5Labelリストを展開/折り畳みするためのラベル—
6Iconリストを展開/折り畳みするためのアイコン要素Icon任意
7Dividerコンテンツを視覚的に区切るための要素—

Options: 選択肢

titleType

Simple

タイトルのみが表示されている状態です。

titleType Simple のInformation List。SLOT、「タイトル」というテキスト、「詳細情報」というラベルと下向き矢印アイコンが表示されています。

Detail

タイトルの下にタイトル概要が表示されている状態です。

タイトルの補足情報が必要な場合に使用します。

titleType Detail のInformation List。SLOT、「タイトル」というテキストとその下に「タイトル概要」というテキスト、「詳細情報」というラベルと下向き矢印アイコンが表示されています。

descriptionType

Label

詳細情報をテキストで表した状態です。

descriptionType Label のInformation List。SLOT、「タイトル」というテキスト、「詳細情報」というテキストラベルと下向き矢印アイコンが表示されています。

Slot

詳細情報をスロットで表した状態です。

画像やブロック要素などあらゆる要素を表示することができます。

descriptionType Slot のInformation List。SLOT、「タイトル」というテキスト、SLOTと下向き矢印アイコンが表示されています。

isLeadSlot

False (Default)

リードスロットが非表示のデフォルトの状態です。

isLeadSlot False のInformation List。「タイトル」というテキスト、「詳細情報」というラベルと下向き矢印アイコンが表示されています。

True

リードスロットを表示するためのオプションです。

アバターや画像などあらゆる要素を表示することができます。

isLeadSlot True のInformation List。SLOT、「タイトル」というテキスト、「詳細情報」というラベルと下向き矢印アイコンが表示されています。

isExpandTrigger

False (Default)

インフォメーションリストを展開/折り畳みしない状態です。

isExpandTrigger False のInformation List。SLOT、「タイトル」というテキスト、「詳細情報」というテキストラベルが表示されています。

True

インフォメーションリストを展開/折り畳みできる状態です。

isExpandTrigger True のInformation List。SLOT、「タイトル」というテキスト、「詳細情報」というラベルと下向き矢印アイコンが表示されています。

Behaviors: 振る舞い

詳細の表示

エクスパンド表示が出ている場合にインフォメーションリストをタップするとインフォメーションリストを展開することができます。

折りたたむ場合はインフォメーションリストをもう一度タップします。

詳細の表示の振る舞いを示す図。上部に「栄養成分」「1個(200g)あたり」というテキストと下向き矢印アイコンが表示され、中央にオレンジ色の下向き矢印、下部に展開された状態で「栄養成分」「1個(200g)あたり」というテキストと上向き矢印アイコン、その下に「エネルギー 300kcal」「たんぱく質 17.8g」「脂質 16.8g」という詳細情報が表示されています。

Metrics: 寸法

  • Vertical Resizing: Hug
  • Horizontal Resizing: Fill
  • Item Spacing: 8px
  • padding Vertical: 8px
  • padding Horizontal: 8px
Information Listの寸法仕様を示す図。

Usage: 使い方

適切な使用例。SLOT、「タイトル」「タイトル概要」というテキスト、「詳細情報」というラベルと下向き矢印アイコンが、すべて上下中央に配置されています。
Do

適切な視覚バランスを実現するために、すべてのコンテンツをインフォメーションリスト内で上下中央に配置する必要があります。

不適切な使用例。SLOT、「タイトル」「タイトル概要」というテキスト、「詳細情報」というラベルと下向き矢印アイコンが上に偏った配置されています。
Don’t

インフォメーションリスト内で上または下に偏った配置にしないでください。

Contents: 内容

不適切な使用例。「管理者」というタイトルと「管理をする人」というタイトル概要、「詳細情報」というラベルと下向き矢印アイコンが表示されています。
Don’t

タイトル概要にタイトルと重複する内容を記載することは避けてください。

Change log: 変更履歴

DateChanges
2024/12/6初版を公開
小さな気づきや違和感があれば、お気軽に教えてください。
フィードバック
Chat illustration
前へ次へ
Information List | Sparkle Design