文档目录
物品栏
176×166 面板 + 护甲 / 2×2 合成 / 背包 / 热键栏 / 副手。
64
32
7
64
12
5
import type { ScreenItem } from "../types";
import { InventoryScreen } from "./index";
function stone(count: number): ScreenItem {
return {
count,
icon: "stone-block",
};
}
const EMPTY = null;
/**
* InventoryScreen 预览用例(规格 §6.2)
*/
export function InventoryScreenDemo() {
return (
<InventoryScreen
armorItems={[
null,
{ icon: "iron-chestplate" },
null,
null,
]}
craftItems={[
{ count: 1, icon: "oak-planks" },
{ count: 1, icon: "oak-planks" },
{ count: 1, icon: "oak-planks" },
{ count: 1, icon: "oak-planks" },
]}
craftResult={{ count: 1, icon: "crafting-table", tooltip: "工作台" }}
hotbarItems={[
{ count: 64, icon: "stone-block" },
{ icon: "grass-block" },
{ count: 12, icon: "diamond" },
{ icon: "sword" },
{ count: 5, icon: "apple" },
EMPTY,
{ icon: "experience-bottle" },
EMPTY,
{ icon: "gunpowder" },
]}
mainItems={[
stone(64),
stone(32),
null,
{ icon: "dirt-block" },
null,
null,
stone(7),
]}
selectedIndex={2}
/>
);
}
安装
CLI 拷贝
$npx shadcn add @tennantite/inventory-screennpm 直装
$pnpm add @tennantite/uinpm 方式安装编译产物;需要改造源码请用上方的 CLI 拷贝安装。
源码
packages/ui/src/screens/containers/inventory-screen/index.tsxnpm 包保留源码目录,可直接复制改造。