Lasso Select Stage

在網格上拖出套索選取框，框到的項目依序浮起亮邊，放開後計數徽章聚合變形為浮動批次操作列。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

網格欄數columns

格子間距（px）gap

<LassoSelectStage />

安裝

npx shadcn@latest add https://webberui.com/r/lasso-select-stage.json

或在 components.json 設定 registries 後，改用 @webberui/lasso-select-stage 安裝。

安裝依賴後，從 registry JSON（/r/lasso-select-stage.json 的 files[0].content）複製 lasso-select-stage.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion lucide-react clsx tailwind-merge

使用

import {
  LassoSelectStage,
  LassoItem,
} from "@/components/ui/lasso-select-stage";

export function Example() {
  return (
    <LassoSelectStage
      columns={4}
      actions={[
        { id: "share", label: "分享" },
        { id: "delete", label: "刪除", destructive: true },
      ]}
      onSelectionChange={(ids) => console.log(ids)}
    >
      {items.map((item) => (
        <LassoItem key={item.id} id={item.id} label={item.name}>
          {/* 任意卡片內容 */}
        </LassoItem>
      ))}
    </LassoSelectStage>
  );
}

在舞台上任意處按住拖曳即可拉出選取框；框到的 LassoItem 會依序浮起並亮邊。放開後，框選計數徽章會聚合變形為浮動批次操作列；按操作列上的 ✕ 取消，操作列會碎裂成小點散回各項目。單張項目也可用點按或鍵盤（Enter／空白鍵）切換選取。

LassoSelectStage Props

Prop	型別	預設值	說明
`children`	`ReactNode`	—	放入 `LassoItem` 子元件
`columns`	`number`	`4`	網格欄數
`gap`	`number`	`12`	格子間距（px）
`actions`	`LassoAction[]`	`[]`	浮動批次操作列上的動作清單
`selectedIds`	`string[]`	—	受控的已選取 id 陣列
`defaultSelectedIds`	`string[]`	`[]`	非受控初始選取 id 陣列
`onSelectionChange`	`(ids: string[]) => void`	—	選取變更時觸發
`aria-label`	`string`	`"可框選項目舞台"`	舞台的無障礙標籤

LassoItem Props

Prop	型別	預設值	說明
`id`	`string`	—	唯一識別 key，選取與散回配對用
`label`	`string`	`id`	無障礙標籤
`children`	`ReactNode`	—	卡片內容

LassoAction

欄位	型別	說明
`id`	`string`	動作唯一識別
`label`	`string`	按鈕文字
`icon`	`ReactNode`	選用圖示，置於文字前
`onSelect`	`(ids: string[]) => void`	點擊時觸發，帶入目前選取；動作後選取自動清空
`destructive`	`boolean`	是否為破壞性動作（紅色強調）

細節

受控／非受控雙模式：提供 selectedIds 時由外部主導；否則以 defaultSelectedIds 起始並自行維護狀態。
框選判定：拖曳位移超過 4px 才視為框選；未位移的點按會切換單張項目，點在空白處則清空選取。
依序浮起：以項目在網格中的順序計算 stagger 延遲，框選時亮邊會逐一亮起。
聚合變形：框選中的計數徽章與放開後的操作列共用 layoutId，因此會平滑地聚合變形而非淡入淡出。
散回動畫：取消時操作列碎裂成小點，沿飛行軌跡回到各項目原位。

可及性

舞台為 role="listbox" aria-multiselectable，項目為 role="option" 並帶 aria-selected。
項目可鍵盤聚焦，Enter／空白鍵切換選取；Esc 取消整批選取。
浮動操作列為 role="toolbar"，選取數量透過 aria-live 區域朗讀。
使用者系統開啟「減少動態效果」時，浮起、聚合變形與散回動畫皆停用，僅保留即時的狀態切換。

Lasso Select Stage

On this page