Preview Updated 2026-05-10

Title bar

Desktop app window header. macOS-style traffic lights with centered title; Windows / Linux-style min/max/close buttons with left-aligned title.

Basic usage

When platform="macos", three dots on the left (close / minimize / maximize) with a centered title. When platform="windows" / 'linux', three buttons on the right with a left-aligned title. The header has -webkit-app-region: drag by default, so a Tauri / Electron host can drag the window from there.

背景

orders.parquet—protoforge●

macOS · centered title

orders.parquet—protoforge

Windows · min / max / close

src/App.vue

<script setup lang="ts">
import { CfTitleBar } from '@chufix-design/vue';
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <div style="border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: hidden;">
      <CfTitleBar platform="macos" title="orders.parquet" subtitle="protoforge" :modified="true" />
      <div style="padding: 16px; color: var(--fg-3);">macOS · centered title</div>
    </div>
    <div style="border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: hidden;">
      <CfTitleBar platform="windows" title="orders.parquet" subtitle="protoforge" />
      <div style="padding: 16px; color: var(--fg-3);">Windows · min / max / close</div>
    </div>
  </div>
</template>

<script setup>
import { CfTitleBar } from '@chufix-design/vue';
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <div style="border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: hidden;">
      <CfTitleBar platform="macos" title="orders.parquet" subtitle="protoforge" :modified="true" />
      <div style="padding: 16px; color: var(--fg-3);">macOS · centered title</div>
    </div>
    <div style="border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: hidden;">
      <CfTitleBar platform="windows" title="orders.parquet" subtitle="protoforge" />
      <div style="padding: 16px; color: var(--fg-3);">Windows · min / max / close</div>
    </div>
  </div>
</template>

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

export default function Demo() {
  return (
    <>
      <CfTitleBar platform="macos" title="orders.parquet" subtitle="protoforge" modified />
      <CfTitleBar platform="windows" title="orders.parquet" subtitle="protoforge" />
    </>
  );
}

macOS / Windows / Linux

Same component, platform switches the look. Use hideControls=true for a plain header bar.

背景

orders.parquet—protoforge●

orders.parquet—protoforge

只标题（隐藏控件）

src/App.vue

<script setup lang="ts">
import { CfTitleBar } from '@chufix-design/vue';
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <div style="border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: hidden;">
      <CfTitleBar platform="macos" title="orders.parquet" subtitle="protoforge" :modified="true" size="sm" />
    </div>
    <div style="border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: hidden;">
      <CfTitleBar platform="windows" title="orders.parquet" subtitle="protoforge" :modified="true" />
    </div>
    <div style="border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: hidden;">
      <CfTitleBar platform="linux" title="orders.parquet" subtitle="protoforge" size="lg" />
    </div>
    <div style="border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: hidden;">
      <CfTitleBar platform="macos" title="只标题（隐藏控件）" hide-controls />
    </div>
  </div>
</template>

<script setup>
import { CfTitleBar } from '@chufix-design/vue';
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <div style="border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: hidden;">
      <CfTitleBar platform="macos" title="orders.parquet" subtitle="protoforge" :modified="true" size="sm" />
    </div>
    <div style="border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: hidden;">
      <CfTitleBar platform="windows" title="orders.parquet" subtitle="protoforge" :modified="true" />
    </div>
    <div style="border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: hidden;">
      <CfTitleBar platform="linux" title="orders.parquet" subtitle="protoforge" size="lg" />
    </div>
    <div style="border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: hidden;">
      <CfTitleBar platform="macos" title="只标题（隐藏控件）" hide-controls />
    </div>
  </div>
</template>

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

export default function Demo() {
  return (
    <>
      <CfTitleBar platform="macos" title="…" subtitle="…" modified />
      <CfTitleBar platform="windows" title="…" subtitle="…" />
      <CfTitleBar platform="linux" title="…" />
    </>
  );
}

API

Prop	Type	Default	Description
`platform`	`'macos' \| 'windows' \| 'linux'`	`'macos'`	Visual variant
`title` / `subtitle`	`string`	—
`modified`	`boolean`	`false`	Show unsaved indicator dot
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	28 / 32 / 36 px
`hideControls`	`boolean`	`false`	Hide window controls; useful as a plain header

Events: minimize / maximize / close.