リスト

製品、サービス、ニュースなど、関連する一連のアイテムをどのように表示するか。

はじめに

リストは、製品、サービス、参照情報、ニュースなど、関連する一連のアイテムを表示するために使用します。各リストには独自の導入タイトル/コンテンツがあり、複数のアイテムをまとめています。アイテムはバックオフィス (リスト > アイテム) で別途管理されます。

すべてのコンポーネントに共通する同じ仕組みに従います。詳細は 概要 と コンポーネントの種類 で説明されています。

リストのフィールド

共通フィールド (種類、順序、編集モード、背景反転、アクション) に加えて、リストには次のものがあります:

フィールド	説明
タイトル (title)	リストのタイトル。
コンテンツ (content / html_content)	リストの導入テキスト。
画像 (image)	リスト自体に関連付けられた画像（アイテムではありません）。
画像の代替テキスト (image_alt)	画像の代替テキスト。
画像タイトル (image_title)	画像の title 属性。

アイテム

各アイテムは1つのリスト (page_listing_id) に属し、独自のフィールドを持ちます:

フィールド	説明
タイトル (title)	アイテムのタイトル。
コンテンツ (content / html_content)	アイテムのテキスト。
画像 (image)	アイテムの画像。
URL (link)	アイテムのリンク — ユーザーがクリックしたときに移動する先。
順序 (sorter)	リスト内でのアイテムの位置。

アイテムには独自の種類フィールドがないことに注意してください。アイテムは所属するリストの種類を継承します。リストの React コンポーネントは、レンダリング時に自身の type を各アイテムに渡します。

レンダリング構造

バナーやコンテンツでは各種類がコンポーネント内の独立したフォルダですが、リストではアイテムをレンダリングするコンポーネント (Item) が種類のフォルダの中にあります:

website/src/components/Listing/
├── index.jsx              # ルーター: リストの種類を選択
└── Default/
    ├── index.jsx           # リストのレイアウト、<Item /> をレンダリング
    ├── info.json
    ├── config.json
    └── Item/
        └── index.jsx        # この種類で各アイテムがどのようにレンダリングされるか

これは理にかなっています。アイテムの表示方法（グリッド、リスト、カードなど）は通常、リストのレイアウトに直接依存するため、各種類の Item は、すべての種類で共有される汎用コンポーネントにするのではなく、種類自体と一緒にカスタマイズできます。

利用可能な種類

現在は標準 (Default) タイプのみが存在します。新しいリストの種類（独自の Item を持つ）を作成するには、コンポーネントの種類 で説明されている同じプロセスに従い、新しい種類の中に Item/ サブフォルダを含めることを忘れないでください。

次のステップ

スライダー に進んでください。