Product info row
Пакет @cloud-ru/ds-uikit-product-info-row — строки сводки по макету Figma infoRow: одна или две колонки значений, токены @cloud-ru/ds-figma-variables, интеграция с @cloud-ru/ds-button, @cloud-ru/ds-divider, @cloud-ru/ds-tooltip, @cloud-ru/ds-skeleton, @cloud-ru/ds-truncate-string.
Состав пакета
- InfoRow — одна строка «метка — значение»; опционально две пары в ряд (
column="2"), действия, скелетон,withTipдля кнопок. Адаптивен: на desktop горизонтальная плотная раскладка, на mobile — вертикальная comfort (densitycomfort, отступы и разделители поposition:first/inner/last). - InfoGroup — несколько строк по объекту
dataи схеме полейitems(accessorKeyилиrender). Адаптивен так же, какInfoRow.
Раскладку оба берут из AdaptiveProvider (@cloud-ru/ds-adaptive); отдельного пропа layoutType нет — форс через withLayoutType / вложенный <AdaptiveProvider>. Desktop/mobile-поверхности — internal. Вспомогательная getPosition({ index, length }) возвращает position строки в списке.
Установка
pnpm add @cloud-ru/ds-uikit-product-info-row
import {
InfoGroup,
InfoRow,
NO_DATA_PLACEHOLDER,
useGetContent,
} from '@cloud-ru/ds-uikit-product-info-row'
import '@cloud-ru/ds-uikit-product-info-row/style.css'
Когда какой использовать
| Задача | Компонент |
|---|---|
| Одна строка полей или две пары «метка — значение» в одной строке | InfoRow |
| Табличный список полей по одному объекту данных | InfoGroup |
Несколько однотипных строк без InfoGroup | InfoRow + useGetContent + InfoRowFieldItem[] |
| Узкий экран / mobile-раскладка той же матрицы Figma | InfoRow / InfoGroup (раскладка из AdaptiveProvider) |