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.

背景

src/App.vue

<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>

<script setup>
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>

import { useState } from 'react';
import { CfDetachedPanel } from '@chufix-design/react';

export default function Demo() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <CfDetachedPanel open={open} onOpenChange={setOpen} title="Inspector" width={320}>
      <div>Panel content…</div>
      </CfDetachedPanel>
    </>
  );
}

import { useState } from 'react';
import { CfDetachedPanel } from '@chufix-design/react';

export default function Demo() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <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.

背景

src/App.vue

<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>

<script setup>
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>

import { useState } from 'react';
import { CfDetachedPanel } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState(false);
  const [b, setB] = useState(false);
  return (
    <>
      <CfDetachedPanel open={a} onOpenChange={setA} width={280} />
      <CfDetachedPanel open={b} onOpenChange={setB} resizable />
    </>
  );
}

import { useState } from 'react';
import { CfDetachedPanel } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState(false);
  const [b, setB] = useState(false);
  return (
    <>
      <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).