文档目录

徽标

物品数量与稀有标识的计数徽标，纯样式，含 default / dim / gold 三种变体。

641史诗v0.1.0

import { Badge } from "./index";

/**
 * Badge 预览用例：物品数量与稀有标识
*/
export function BadgeDemo() {
  return (
    <div className="flex items-end gap-12">
      <span className="mc-tex-slot relative block size-18">
        <Badge className="absolute right-1 bottom-0">64</Badge>
      </span>
      <span className="mc-tex-slot relative block size-18">
        <Badge className="absolute right-1 bottom-0" variant="gold">
          1
        </Badge>
      </span>
      <Badge variant="gold">史诗</Badge>
      <Badge variant="dim">v0.1.0</Badge>
    </div>
  );
}

安装

CLI 拷贝

$npx shadcn add @tennantite/badge

npm 直装

$pnpm add @tennantite/ui

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

用法

npm 导入

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

CLI 拷贝导入

import { Badge } from "@/components/tennantite/badge";

import { Badge } from "./index";

/**
 * Badge 预览用例：物品数量与稀有标识
*/
export function BadgeDemo() {
  return (
    <div className="flex items-end gap-12">
      <span className="mc-tex-slot relative block size-18">
        <Badge className="absolute right-1 bottom-0">64</Badge>
      </span>
      <span className="mc-tex-slot relative block size-18">
        <Badge className="absolute right-1 bottom-0" variant="gold">
          1
        </Badge>
      </span>
      <Badge variant="gold">史诗</Badge>
      <Badge variant="dim">v0.1.0</Badge>
    </div>
  );
}

API Reference

Prop	Type	Default	描述
variant	"default" \| "dim" \| "gold"	"default"	视觉变体：default 物品数量（白字黑影）/ dim 次要信息（暗灰）/ gold 稀有或标题（金色）。

源码

packages/ui/src/primitives/badge/index.tsx

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