Виджеты
DashboardGrid
Плиточная сетка с перетаскиванием и ресайзом.
Плиточная сетка с перетаскиванием и ресайзом — мини-grid-layout. Плитки живут в целочисленной сетке колонок; двигаешь одну — она расталкивает соседей, освободилось место — всё оседает вверх.
Установка
npx @toimetdev/pathlogs-ui add dashboard-gridПример
Тащите плитки и тяните за нижний правый угол — соседи расступаются, сетка оседает.
<DashboardGrid
items={items}
onItemsChange={setItems}
columns={12}
rowHeight={72}
>
{(item) => <Tile id={item.id} />}
</DashboardGrid>Тащите плитки и тяните за нижний правый угол — соседи расступаются, сетка оседает.
Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
items* | GridItem[] | — | Плитки: id, x, y, w, h, static?. |
onItemsChange* | (items) => void | — | Новая раскладка после жеста. |
renderItem* | (item) => ReactNode | — | Содержимое плитки по её id. |
columns | number | 12 | Число колонок. |
rowHeight | number | 80 | Высота строки (px). |
gap | number | 12 | Зазор между плитками (px). |
resizable | boolean | true | Разрешить ресайз за нижний правый угол. |
items*GridItem[]Плитки: id, x, y, w, h, static?.
onItemsChange*(items) => voidНовая раскладка после жеста.
renderItem*(item) => ReactNodeСодержимое плитки по её id.
columnsnumberпо умолчанию: 12
Число колонок.
rowHeightnumberпо умолчанию: 80
Высота строки (px).
gapnumberпо умолчанию: 12
Зазор между плитками (px).
resizablebooleanпо умолчанию: true
Разрешить ресайз за нижний правый угол.
Расталкивание и сжатие
Упаковка отдельно
import {
moveItem, // переместить с расталкиванием и сжатием
resizeItem, // изменить размер
compact, // осадить всё вверх
findFreeSpot, // первое свободное место под новую плитку
} from "@/components/ui/dashboard-grid/gridLayout";