Record Card

Карточка записи: статус, контекст, ключевые поля и действия. Pro · Данные и показатели › Карточки

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add record-card

npm install valyro-ui-pro

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

Prop	Type	Default
`title` *	`ReactNode`		Name of the record: an incident, an order, a ticket.
`description`	`ReactNode`		One or two sentences under the title.
`meta`	`ReactNode`		Small uppercase context line: "Production · API".
`status`	`RecordCardStatus`		Status pill at the end of the meta line.
`fields`	`DescriptionListItem[]`	`[]`	Key facts shown in an inset panel.
`columns`	`number`	`2`	Columns of the fields panel. Default 2.
`actions`	`ReactNode`		Buttons at the bottom.
`children`	`ReactNode`		Free content between the fields and the actions.
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`3`	Level of the title (default 3).

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