跳到主要内容
Tennantite
EN
文档目录

玩家物品栏

主背包 3×9 + 快捷栏 1×9 的复用区块。

物品栏
64
32
64
12

安装

CLI 拷贝

$npx shadcn add @tennantite/player-inventory

npm 直装

$pnpm add @tennantite/ui

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

用法

npm 导入

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

CLI 拷贝导入

import { PlayerInventory } from "@/components/tennantite/player-inventory";
import { ScreenPanel } from "../screen-panel/index";
import { PlayerInventory } from "./index";

export function PlayerInventoryDemo() {
  return (
    <ScreenPanel height={166} title="物品栏" width={176}>
      <PlayerInventory
        hotbarItems={[
          { count: 64, icon: "stone-block" },
          { icon: "grass-block" },
          { count: 12, icon: "diamond" },
        ]}
        mainItems={[
          { count: 64, icon: "stone-block" },
          { count: 32, icon: "dirt-block" },
          null,
          { icon: "sword" },
        ]}
        selectedIndex={1}
      />
    </ScreenPanel>
  );
}

API Reference

PropTypeDefault描述
barebooleanfalse不绘制槽位凹槽(容器背景已烘焙槽框)。
classNamestring—追加到根元素的类名。
frameClassNamestring—自定义槽框纹理类(默认原版 `mc-tex-slot`)。
hotbarItems(InventoryItem | null | undefined)[][]快捷栏 9 格。
hotbarYnumber141快捷栏槽位 y(GUI px,默认 141)。
mainItems(InventoryItem | null | undefined)[][]主背包物品(行优先,默认 3×9)。
mainRowsnumber3主背包行数(默认 3)。
onSlotClick(area: "hotbar" | "main", index: number) => void—槽位点击回调。
selectedIndexnumber—快捷栏选中索引。
xnumber7槽位起始 x(GUI px,默认 7)。
ynumber83主背包槽位起始 y(GUI px,默认 83)。

源码

packages/ui/src/containers/player-inventory/index.tsx

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