文档目录

物品堆叠

图标 + 数量徽标的最小物品单元。

import { ItemStack } from "./index";

/**
 * ItemStack 预览用例（规格 §5 #3）
*/
export function ItemStackDemo() {
  return (
    <div className="flex items-center gap-8">
      <ItemStack count={64} icon="stone-block" />
      <ItemStack count={1} icon="diamond" selected tooltip="钻石" />
      <ItemStack icon="apple" tooltip="苹果 · 恢复 4 饥饿" />
      <ItemStack count={3} icon="sword" selected />
    </div>
  );
}

安装

CLI 拷贝

$npx shadcn add @tennantite/item-stack

npm 直装

$pnpm add @tennantite/ui

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

用法

npm 导入

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

CLI 拷贝导入

import { ItemStack } from "@/components/tennantite/item-stack";

import { ItemStack } from "./index";

/**
 * ItemStack 预览用例（规格 §5 #3）
*/
export function ItemStackDemo() {
  return (
    <div className="flex items-center gap-8">
      <ItemStack count={64} icon="stone-block" />
      <ItemStack count={1} icon="diamond" selected tooltip="钻石" />
      <ItemStack icon="apple" tooltip="苹果 · 恢复 4 饥饿" />
      <ItemStack count={3} icon="sword" selected />
    </div>
  );
}

API Reference

Prop	Type	Default	描述
bare	boolean	false	不绘制槽位纹理（由父容器提供）。
className	string	—	追加到根元素的类名。
count	number	—	数量（>1 时显示计数徽标，规格 §5 #3）。
icon	Parameters<typeof Icon>[0]["name"]	—	内置像素图标名（与 src 二选一）。
selected	boolean	false	选中态（1 GUI px 白色内框）。
size	number	18	槽位边长（GUI px，默认 18 —— 原版槽位）。
src	string	—	自定义图标 URL。
style	CSSProperties	—	槽位样式（绝对定位等）。
tooltip	ReactNode	—	悬浮提示内容（提供时以 Tooltip 包裹，交互经水合增强）。

源码

packages/ui/src/containers/item-stack/index.tsx

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