Lasso Select

Выделение группы карточек рамкой. Бесплатно, MIT · Работа и команды › Холсты, выделение и бюджет

Установка

npx valyro-cli@latest add lasso-select

npx shadcn@latest add https://valyro.xyz/r/lasso-select.json

npm install valyro-ui

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

Пропсы

Prop	Type	Default
`itemIds` *	`string[]`		Every selectable id, in document order: the known set, the order of the result and the scope of Select all.
`selectedIds`	`string[]`		Selected ids. A change of it during a gesture cancels the gesture.
`defaultSelectedIds`	`string[]`	`[]`	Initial `selectedIds` when uncontrolled.
`onSelectedIdsChange`	`(ids: string[], detail: LassoChangeDetail) => void`		Called with the new `selectedIds` when it changes.
`hitMode`	`'intersect' \| 'contain'`	`'intersect'`	`intersect` (default): touching an item selects it; `contain`: the item must be fully inside the lasso.
`selectionMode`	`'replace' \| 'add' \| 'toggle'`	`'replace'`	What a gesture does without modifier keys. Default `replace`. Shift adds, Ctrl / Cmd toggles (and wins).
`getItemRect`	`(id: string) => DOMRect \| null`		Viewport rectangle of an item, for layouts that know it better than the registered element (null: skip it).
`disabledIds`	`string[]`	`[]`	Ids that keep their state: a lasso, a toggle and Select all leave them as they are.
`showToolbar`	`boolean`	`true`	Hides the toolbar (count, Select all, Clear, Select multiple). Default true.
`children`	`ReactNode`		The items: elements that call `useLassoItem(id)`.
`labels`	`Partial<LassoSelectLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Похожие компоненты

Sticker Board — Свободная композиция из фотографий, наклеек и заметок: двигать и поворачивать
Priority Budget — Распределение общего ограниченного бюджета очков
Calendar View — Календарь событий
Scheduler — Планировщик: день, неделя, месяц и таймлайн ресурсов, drag & drop, повторы
Kanban Board — Доска задач
Gantt Chart — Диаграммы Ганта с зависимостями и перетаскиванием
Booking Slots — Запись на встречу: календарь, слоты в часовом поясе гостя, форма и подтверждение
CRM Pipeline — Воронка сделок: этапы, суммы и вероятности, перетаскивание между этапами
Approval Flow — Многоэтапное согласование: последовательные и параллельные этапы, решения с причиной, история
Goal Tracker — OKR: цели и ключевые результаты, статусы, уверенность, чек-ины с историей
Onboarding Checklist — Чек-лист онбординга: прогресс, подсказки с CTA, скрытие и празднование
Course Path Navigator — Карта курса: модули, блокировки, прогресс и навыки, список на узком экране

Назад: Sticker Board · Далее: Priority Budget · Весь раздел «Работа и команды»