Preview Updated 2026-05-10

Tear-off tab

Drag a tab past the threshold to fire a tear-off event; the consumer decides whether to spawn a DetachedPanel or a new window.

Basic usage

Standard tabs plus a drag gesture. When the vertical drag distance exceeds tearThreshold (default 60px), tear-off(id, item, x, y) fires. The component itself does not create windows or panels — the consumer decides the behavior.

orders.ts●

README.md

// orders.ts

src/App.vue vue

<CfTearOffTabs
:tabs="tabs"
v-model="active"
@tear-off="(id) => spawnPanel(id)"
@close="(id) => removeTab(id)"
>
<template #content-orders>orders.ts content</template>
</CfTearOffTabs>

src/App.tsx tsx

<CfTearOffTabs
tabs={tabs}
value={active}
onChange={setActive}
onTearOff={(id) => spawnPanel(id)}
onClose={(id) => removeTab(id)}
slots={{ 'content-orders': <pre>orders.ts</pre> }}
/>

Tear-off into a DetachedPanel

Spawn the torn-off tab into a DetachedPanel immediately; reattach it back when the panel is closed.

orders.ts●

// orders.ts
拖动这个 tab 向下可触发 tear-off →

src/App.vue vue

<CfTearOffTabs ... @tear-off="tearOff" />
<CfDetachedPanel ... @update:open="reattach" />

src/App.tsx tsx

<CfTearOffTabs ... onTearOff={tearOff} />
<CfDetachedPanel ... onOpenChange={reattach} />

API

Prop	Type	Default	Description
`tabs`	`TearOffTabItem[]`	—	`{ id, title, contentKey?, modified?, closable? }`
`modelValue` / `value`	`string`	first tab	Active tab id
`tearThreshold`	`number`	`60`	Vertical drag distance that triggers tear-off

Events: update:modelValue / tear-off(id, item, x, y) / close(id, item).