Skeleton List (スケルトン リスト)

    Skeleton List コンポーネントを使用して、標準の情報と同じタイプの情報をレイアウトします。ただし、データが存在しない場合のアプリケーションの状態 (データがリモート データソースからロードされ、接続が切れているか、時間がかかる場合など) も示します。Skeleton List は、既知のレイアウトの List を視覚的に表したものですが、表示するデータはありません。

    Skeleton List のデモ

    タイプ

    Skeleton List は、標準の List と同じ 2 つのタイプをサポートします: One-line Item List (1 行の項目リスト) と Two-line Item List (2 行の項目リスト)。

    Skeleton List Item

    Skeleton List Item には、プロパティ パネルの Line プロパティの下にある標準のリストと同じ 3 つのプリセット タイプ (Header、One-line、Two-line) があります。

    List Item の領域

    Skeleton List Item には、標準 List のような 2 つの異なる領域があります: Primary Action と Secondary Action。

    Primary Action

    Figma の 「Type」 プロパティには、5 つの交換可能な Skeleton List Item Primary Action があります。Skeleton List Item Primary Actions は、標準の List Item に似ています。List Item は、Line プロパティの下にある One-line と Two-line オプションをサポートしています。

    Avatar + Label + Description
    Checkbox + Label Primary Action の Checkbox にはラベルを付けることができないため、Figma のレイヤー パネルで前後のラベルがオフになっており、この設定は変更するべきではありません。
    Icon + Label + Desc
    Label + Progress
    Label

    Figma の Secondary Action

    Skeleton List Item の Secondary Action は、Symbol Overrides として利用可能な標準の List Item からの対応物で可能なすべてのシナリオを含みます。Figma では、すべてのアクションは間もなく追加される予定です。

    Text と Icon

    使用方法

    リスト レイアウトを作成するときは、標準リスト項目と Skeleton List Item を組合さないようにします。データはすべてのリスト項目に存在するか、いずれにも存在しないため、2 つのタイプを同じレイアウト内で使用しないでください。

    良い例 悪い例

    その他のリソース

    関連トピック:

    コミュニティに参加して新しいアイデアをご提案ください。