文档目录
玩家物品栏
主背包 3×9 + 快捷栏 1×9 的复用区块。
物品栏
64
32
64
12
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>
);
}
安装
CLI 拷贝
$npx shadcn add @tennantite/player-inventorynpm 直装
$pnpm add @tennantite/uinpm 方式安装编译产物;需要改造源码请用上方的 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
| Prop | Type | Default | 描述 |
|---|---|---|---|
| bare | boolean | false | 不绘制槽位凹槽(容器背景已烘焙槽框)。 |
| className | string | — | 追加到根元素的类名。 |
| frameClassName | string | — | 自定义槽框纹理类(默认原版 `mc-tex-slot`)。 |
| hotbarItems | (InventoryItem | null | undefined)[] | [] | 快捷栏 9 格。 |
| hotbarY | number | 141 | 快捷栏槽位 y(GUI px,默认 141)。 |
| mainItems | (InventoryItem | null | undefined)[] | [] | 主背包物品(行优先,默认 3×9)。 |
| mainRows | number | 3 | 主背包行数(默认 3)。 |
| onSlotClick | (area: "hotbar" | "main", index: number) => void | — | 槽位点击回调。 |
| selectedIndex | number | — | 快捷栏选中索引。 |
| x | number | 7 | 槽位起始 x(GUI px,默认 7)。 |
| y | number | 83 | 主背包槽位起始 y(GUI px,默认 83)。 |
源码
packages/ui/src/containers/player-inventory/index.tsxnpm 包保留源码目录,可直接复制改造。