Список

Как представить ряд связанных элементов — товаров, услуг, новостей и так далее.

Введение

Список служит для представления ряда связанных элементов — товаров, услуг, ссылок, новостей и так далее. Каждый Список имеет собственный заголовок/вводный контент и группирует несколько Элементов, управляемых отдельно в бэк-офисе (Список > Элемент).

Он следует тому же общему для всех компонентов механизму, описанному в Обзоре и Типах компонентов.

Поля списка

Помимо общих полей (Тип, Порядок, Режим редактирования, Инвертировать фон, Действия), у Списка есть:

Поле	Описание
Заголовок (title)	Заголовок списка.
Содержимое (content / html_content)	Вводный текст списка.
Изображение (image)	Изображение, связанное с самим списком (не с элементами).
Alt-текст изображения (image_alt)	Альтернативный текст изображения.
Заголовок изображения (image_title)	Атрибут title изображения.

Элементы

Каждый элемент принадлежит Списку (page_listing_id) и имеет собственные поля:

Поле	Описание
Заголовок (title)	Заголовок элемента.
Содержимое (content / html_content)	Текст элемента.
Изображение (image)	Изображение элемента.
URL (link)	Ссылка элемента — куда переходит пользователь при клике.
Порядок (sorter)	Позиция элемента внутри списка.

Обрати внимание, что компонент Item не имеет собственного поля Тип — он наследует тип Списка, к которому принадлежит: React-компонент Списка передаёт свой type каждому элементу при его рендеринге.

Структура рендеринга

В отличие от Баннера и Контента, где каждый тип — это независимая папка внутри компонента, в Списке компонент, который рендерит элементы (Item), находится внутри папки типа:

website/src/components/Listing/
├── index.jsx              # маршрутизатор: выбирает тип списка
└── Default/
    ├── index.jsx           # макет списка, рендерит <Item />
    ├── info.json
    ├── config.json
    └── Item/
        └── index.jsx        # как каждый элемент отображается для этого типа

Это имеет смысл, потому что способ представления элемента (сетка, список, карточки...) обычно напрямую зависит от макета списка — поэтому Item каждого типа можно настраивать вместе с самим типом, а не делать его универсальным компонентом, общим для всех типов.

Доступные типы

Сейчас существует только тип Стандартный (Default). Чтобы создать новый тип Списка (с собственным Item), следуйте тому же процессу, описанному в Типах компонентов, не забыв включить подпапку Item/ в новый тип.

Следующий шаг

Переходите к Слайдеру.