文档目录

面板

九宫格纹理窗口容器，default 灰底 / dark 半透明两种变体。

Panel

窗口灰面板（default 变体）

Panel dark

半透明暗底，底色可透出

import { TitleBar } from "../title-bar/index";
import { Panel } from "./index";

/**
 * Panel 预览用例（规格 §5 #1）
*/
export function PanelDemo() {
  return (
    <div className="flex items-start gap-12">
      <Panel className="w-140">
        <TitleBar title="Panel" />
        <p className="font-mc mc-text">窗口灰面板（default 变体）</p>
      </Panel>
      <Panel
        className="w-140 bg-linear-to-br from-[#5b3] to-[#357]"
        variant="dark"
      >
        <TitleBar title="Panel dark" />
        <p className="font-mc mc-text">半透明暗底，底色可透出</p>
      </Panel>
    </div>
  );
}

安装

CLI 拷贝

$npx shadcn add @tennantite/panel

npm 直装

$pnpm add @tennantite/ui

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

用法

npm 导入

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

CLI 拷贝导入

import { Panel } from "@/components/tennantite/panel";

import { TitleBar } from "../title-bar/index";
import { Panel } from "./index";

/**
 * Panel 预览用例（规格 §5 #1）
*/
export function PanelDemo() {
  return (
    <div className="flex items-start gap-12">
      <Panel className="w-140">
        <TitleBar title="Panel" />
        <p className="font-mc mc-text">窗口灰面板（default 变体）</p>
      </Panel>
      <Panel
        className="w-140 bg-linear-to-br from-[#5b3] to-[#357]"
        variant="dark"
      >
        <TitleBar title="Panel dark" />
        <p className="font-mc mc-text">半透明暗底，底色可透出</p>
      </Panel>
    </div>
  );
}

API Reference

Prop	Type	Default	描述
variant	"dark" \| "default"	"default"	default 窗口灰 / dark 半透明暗底（规格 §5 #1）。

源码

packages/ui/src/containers/panel/index.tsx

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