Preview Updated 2026-05-10

Detached panel

Draggable floating panel teleported to body. Use with TearOffTab / DockLayout's detach action.

Basic usage

Hold the header to drag it; resizable enables the browser-native resize handle. To turn it into a separate window in Tauri / Electron, just spawn a new BrowserWindow / WebView in the tear-off event.

背景

<script setup lang="ts">
import { ref } from 'vue';
import { CfDetachedPanel, CfButton } from '@chufix-design/vue';
const open = ref(false);
</script>

<template>
  <div class="demo-row">
    <CfButton @click="open = true">弹出浮动面板</CfButton>
    <CfDetachedPanel v-model:open="open" title="Inspector" :width="320" :height="220">
      <div style="font-size: 13px; color: var(--fg-2); line-height: 1.6;">
        拖动顶部把手可以移动面板。<br>
        外部 Tauri/Electron 应用可在 tear-off 事件里把它转换成独立窗口。
      </div>
    </CfDetachedPanel>
  </div>
</template>

<CfDetachedPanel open={open} onOpenChange={setOpen} title="Inspector" width={320}>
<div>Panel content…</div>
</CfDetachedPanel>

Multiple panels

Multiple DetachedPanels can be open simultaneously; layer them explicitly via zIndex. resizable=true enables the browser-native resize handle.

背景

<script setup lang="ts">
import { ref } from 'vue';
import { CfDetachedPanel, CfButton } from '@chufix-design/vue';
const a = ref(false);
const b = ref(false);
</script>

<template>
  <div class="demo-row">
    <CfButton @click="a = true">面板 A</CfButton>
    <CfButton variant="secondary" @click="b = true">面板 B（resizable）</CfButton>
    <CfDetachedPanel
      v-model:open="a"
      title="Inspector A"
      :width="280"
      :height="180"
      :z-index="1500"
    >
      <div style="font-size: 12px; color: var(--fg-2);">头部拖动可移动整个面板。</div>
    </CfDetachedPanel>
    <CfDetachedPanel
      v-model:open="b"
      title="Inspector B"
      :width="320"
      :height="220"
      resizable
      :z-index="1501"
    >
      <div style="font-size: 12px; color: var(--fg-2);">右下角可拖拽改变大小（resizable）。</div>
    </CfDetachedPanel>
  </div>
</template>

<CfDetachedPanel open={a} onOpenChange={setA} width={280} />
<CfDetachedPanel open={b} onOpenChange={setB} resizable />

API

Prop	Type	Default	Description
`open` / `v-model:open`	`boolean`	`false`
`title`	`string`	—	Header title
`x` / `y`	`number`	auto	Initial position
`width` / `height`	`number \| string`	`360 / 240`
`resizable`	`boolean`	`false`	Enable native resize handle
`closable`	`boolean`	`true`
`to`	`string`	`'body'`	Teleport target
`zIndex`	`number`	—

Events: update:open / move(x, y).