Preview Updated 2026-05-10

Floating inspector

Corner-anchored, collapsible inspector panel — useful for performance monitors and debug overlays.

Basic usage

Anchored to one of the four corners; offset controls the distance from the edge. Click the caret in the header to collapse / expand (the title remains visible).

背景视口

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfFloatingInspector, CfButton } from '@chufix-design/vue';
const open = ref(false);
</script>
<template>
  <div class="demo-row">
    <CfButton @click="open = !open">{{ open ? '关闭' : '打开' }} 检查器</CfButton>
    <CfFloatingInspector
      :open="open"
      placement="bottom-right"
      title="Inspector"
      @update:open="(v) => open = v"
    >
      <ul style="margin: 0; padding-left: 16px; font-size: 12px; color: var(--fg-2);">
        <li>FPS: 60</li>
        <li>Render: 4.2ms</li>
        <li>Paint: 1.8ms</li>
        <li>Layout: 0.4ms</li>
      </ul>
    </CfFloatingInspector>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfFloatingInspector, CfButton } from '@chufix-design/vue';
const open = ref(false);
</script>
<template>
  <div class="demo-row">
    <CfButton @click="open = !open">{{ open ? '关闭' : '打开' }} 检查器</CfButton>
    <CfFloatingInspector
      :open="open"
      placement="bottom-right"
      title="Inspector"
      @update:open="(v) => open = v"
    >
      <ul style="margin: 0; padding-left: 16px; font-size: 12px; color: var(--fg-2);">
        <li>FPS: 60</li>
        <li>Render: 4.2ms</li>
        <li>Paint: 1.8ms</li>
        <li>Layout: 0.4ms</li>
      </ul>
    </CfFloatingInspector>
  </div>
</template>

import { useState } from 'react';
import { CfButton, CfFloatingInspector } from '@chufix-design/react';

export default function Demo() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <div className="demo-row">
          <CfButton onClick={() => setOpen(!open)}>{open ? '关闭' : '打开'} 检查器</CfButton>
          <CfFloatingInspector open={open} placement="bottom-right" title="Inspector" onOpenChange={setOpen} >
            <ul style={{ margin: 0, paddingLeft: 16, fontSize: 12, color: "var(--fg-2)" }}>
              <li>FPS: 60</li>
              <li>Render: 4.2ms</li>
              <li>Paint: 1.8ms</li>
              <li>Layout: 0.4ms</li>
            </ul>
          </CfFloatingInspector>
        </div>
    </>
  );
}

import { useState } from 'react';
import { CfButton, CfFloatingInspector } from '@chufix-design/react';

export default function Demo() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <div className="demo-row">
          <CfButton onClick={() => setOpen(!open)}>{open ? '关闭' : '打开'} 检查器</CfButton>
          <CfFloatingInspector open={open} placement="bottom-right" title="Inspector" onOpenChange={setOpen} >
            <ul style={{ margin: 0, paddingLeft: 16, fontSize: 12, color: "var(--fg-2)" }}>
              <li>FPS: 60</li>
              <li>Render: 4.2ms</li>
              <li>Paint: 1.8ms</li>
              <li>Layout: 0.4ms</li>
            </ul>
          </CfFloatingInspector>
        </div>
    </>
  );
}

Four corners and close

Toggle through all four placements; click “close” to demo onOpenChange.

背景视口

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfFloatingInspector, CfButton } from '@chufix-design/vue';
import type { InspectorPlacement } from '@chufix-design/vue';
const open = ref(true);
const placement = ref<InspectorPlacement>('bottom-right');
const placements: InspectorPlacement[] = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
</script>
<template>
  <div class="demo-row" style="flex-wrap: wrap;">
    <CfButton v-for="p in placements" :key="p" size="sm" @click="placement = p; open = true">{{ p }}</CfButton>
    <CfButton variant="tertiary" size="sm" @click="open = false">关闭</CfButton>
    <CfFloatingInspector
      :open="open"
      :placement="placement"
      :title="placement"
      @update:open="(v) => open = v"
    >
      <ul style="margin: 0; padding-left: 16px; font-size: 12px; color: var(--fg-2);">
        <li>FPS: 60</li>
        <li>Render: 4.2ms</li>
        <li>Paint: 1.8ms</li>
        <li>Layout: 0.4ms</li>
      </ul>
    </CfFloatingInspector>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfFloatingInspector, CfButton } from '@chufix-design/vue';
const open = ref(true);
const placement = ref<InspectorPlacement>('bottom-right');
const placements= ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
</script>
<template>
  <div class="demo-row" style="flex-wrap: wrap;">
    <CfButton v-for="p in placements" :key="p" size="sm" @click="placement = p; open = true">{{ p }}</CfButton>
    <CfButton variant="tertiary" size="sm" @click="open = false">关闭</CfButton>
    <CfFloatingInspector
      :open="open"
      :placement="placement"
      :title="placement"
      @update:open="(v) => open = v"
    >
      <ul style="margin: 0; padding-left: 16px; font-size: 12px; color: var(--fg-2);">
        <li>FPS: 60</li>
        <li>Render: 4.2ms</li>
        <li>Paint: 1.8ms</li>
        <li>Layout: 0.4ms</li>
      </ul>
    </CfFloatingInspector>
  </div>
</template>

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

export default function Demo() {
  const [open, setOpen] = useState(true);
  const [open, setOpen] = useState(true);
  const placement = 'bottom-right';
  return (
    <>
      <CfFloatingInspector open={open} onOpenChange={setOpen} placement="top-right" />
    </>
  );
}

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

export default function Demo() {
  const [open, setOpen] = useState(true);
  const [open, setOpen] = useState(true);
  const placement = 'bottom-right';
  return (
    <>
      <CfFloatingInspector open={open} onOpenChange={setOpen} placement="top-right" />
    </>
  );
}

API

Prop	Type	Default	Description
`open`	`boolean`	`true`
`collapsed`	`boolean`	`false`	Collapsed state
`placement`	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`	`'bottom-right'`
`title`	`string`	—
`width`	`number \| string`	`320`
`offset`	`number`	`24`	Distance from viewport edge in px
`closable`	`boolean`	`true`