List Block

Блок списка с картинками или иконками, описанием и значением. Pro · Данные и показатели › Списки и деревья

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add list-block

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { ListBlock } from 'valyro-ui-pro';

Prop	Type	Default
`title`	`ReactNode`		Heading of the block.
`description`	`ReactNode`		Muted line under the heading.
`items` *	`ListBlockItem[]`		The rows, each a tile with media, text and an optional value.
`layout`	`'default' \| 'narrow'`	`'default'`	`default`: large tiles with the value under the text; `narrow`: compact rows with the value at the end.
`empty`	`ReactNode`		Shown when `items` is empty.
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`3`	Level of the heading (default 3).

Description List — Список «ключ — значение»: столбиком, строками или сеткой с иконками
Tree View — Древовидные структуры
Accordion — Раскрывающиеся секции
Sortable — Сортировка перетаскиванием
JSON Viewer — Просмотр JSON
Timeline — Хронология событий
Data Table — Таблицы с поиском и сортировкой
Data Grid — Таблица на 100 000 строк: группировка, фильтры, редактирование
Virtual List — Виртуальный список на 100 000 строк
Bulk Action Bar — Панель действий над выбранными строками с горячими клавишами
Card — Универсальные карточки
Item Card — Карточка-строка: иконка, заголовок, описание и элемент управления справа