文档目录

分隔线

32×2 header / inworld / footer separator 平铺。

上方内容

下方内容

左

右

strong 单实线

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

export function DividerDemo() {
  return (
    <Panel className="w-160 p-8">
      <p className="font-mc mc-text">上方内容</p>
      <Divider className="my-8" />
      <p className="font-mc mc-text text-mc-text-dim">下方内容</p>
      <div className="mt-8 flex h-40 items-stretch gap-8">
        <span className="font-mc mc-text">左</span>
        <Divider orientation="vertical" />
        <span className="font-mc mc-text">右</span>
      </div>
      <Divider className="my-8" variant="strong" />
      <p className="font-mc mc-text text-mc-text-dim">strong 单实线</p>
    </Panel>
  );
}

安装

CLI 拷贝

$npx shadcn add @tennantite/divider

npm 直装

$pnpm add @tennantite/ui

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

用法

npm 导入

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

CLI 拷贝导入

import { Divider } from "@/components/tennantite/divider";

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

export function DividerDemo() {
  return (
    <Panel className="w-160 p-8">
      <p className="font-mc mc-text">上方内容</p>
      <Divider className="my-8" />
      <p className="font-mc mc-text text-mc-text-dim">下方内容</p>
      <div className="mt-8 flex h-40 items-stretch gap-8">
        <span className="font-mc mc-text">左</span>
        <Divider orientation="vertical" />
        <span className="font-mc mc-text">右</span>
      </div>
      <Divider className="my-8" variant="strong" />
      <p className="font-mc mc-text text-mc-text-dim">strong 单实线</p>
    </Panel>
  );
}

API Reference

Prop	Type	Default	描述
variant	"default" \| "inworld" \| "strong"	"default"	原版分隔线：普通 / 游戏内 / 强分隔。

源码

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

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