文档目录

标题栏

像素字体窗口标题，支持左 / 中 / 右对齐。

合成

居中标题（默认）

左对齐

右对齐

import { Panel } from "../panel/index";
import { TitleBar } from "./index";

export function TitleBarDemo() {
  return (
    <Panel className="w-160 p-8">
      <TitleBar title="合成" />
      <p className="mt-8 font-mc mc-text text-mc-text-dim">居中标题（默认）</p>
      <TitleBar align="start" className="mt-8" title="左对齐" />
      <TitleBar align="end" className="mt-8" title="右对齐" />
    </Panel>
  );
}

安装

CLI 拷贝

$npx shadcn add @tennantite/title-bar

npm 直装

$pnpm add @tennantite/ui

npm 方式安装编译产物；需要改造源码请用上方的 CLI 拷贝安装。

用法

npm 导入

import { TitleBar } from "@tennantite/ui";

CLI 拷贝导入

import { TitleBar } from "@/components/tennantite/title-bar";

import { Panel } from "../panel/index";
import { TitleBar } from "./index";

export function TitleBarDemo() {
  return (
    <Panel className="w-160 p-8">
      <TitleBar title="合成" />
      <p className="mt-8 font-mc mc-text text-mc-text-dim">居中标题（默认）</p>
      <TitleBar align="start" className="mt-8" title="左对齐" />
      <TitleBar align="end" className="mt-8" title="右对齐" />
    </Panel>
  );
}

API Reference

Prop	Type	Default	描述
align	"center" \| "end" \| "start"	"center"	标题对齐方式。
title	ReactNode	—	标题内容。

源码

packages/ui/src/containers/title-bar/index.tsx

npm 包保留源码目录，可直接复制改造。