开发预览更新于 2026-05-10

TitleBar 标题栏

桌面应用窗口顶栏。macOS 风格 traffic light + 居中标题；Windows / Linux 风格 min/max/close 按钮 + 左对齐。

基础用法

platform="macos" 时左侧三个圆点（关闭 / 最小化 / 最大化）+ 居中标题； platform="windows" / 'linux' 时右侧三个按钮 + 左对齐标题。头部默认 -webkit-app-region: drag，外层 Tauri / Electron 应用可拖拽窗口。

背景

orders.parquet—protoforge●

macOS · centered title

orders.parquet—protoforge

Windows · min / max / close

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

<CfTitleBar platform="macos" title="orders.parquet" subtitle="protoforge" modified />
<CfTitleBar platform="windows" title="orders.parquet" subtitle="protoforge" />

macOS / Windows / Linux 三平台

同一组件，platform 切视觉。hideControls=true 用作普通 header bar。

背景

orders.parquet—protoforge●

orders.parquet—protoforge

只标题（隐藏控件）

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

<CfTitleBar platform="macos" title="…" subtitle="…" modified />
<CfTitleBar platform="windows" title="…" subtitle="…" />
<CfTitleBar platform="linux" title="…" />

API

属性	类型	默认值	说明
`platform`	`'macos' \| 'windows' \| 'linux'`	`'macos'`	视觉变体
`title` / `subtitle`	`string`	—
`modified`	`boolean`	`false`	显示未保存圆点
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	28 / 32 / 36 px
`hideControls`	`boolean`	`false`	隐藏窗口控件，作为普通 header 用

事件：minimize / maximize / close。