Documentation
CraftingScreen
176×166 panel with a 3×3 crafting grid, 26×26 result slot and arrow.
合成
64
import { CraftingScreen } from "./index";
/**
* CraftingScreen 预览用例(规格 §6.2):木板 ×4 → 工作台
*/
export function CraftingScreenDemo() {
return (
<CraftingScreen
craftItems={[
{ count: 1, icon: "oak-planks" },
{ count: 1, icon: "oak-planks" },
null,
{ count: 1, icon: "oak-planks" },
{ count: 1, icon: "oak-planks" },
null,
null,
null,
null,
]}
craftResult={{ count: 1, icon: "crafting-table", tooltip: "工作台" }}
hotbarItems={[{ count: 64, icon: "stone-block" }]}
selectedIndex={0}
title="合成"
/>
);
}
Install
CLI copy
$npx shadcn add @tennantite/crafting-screennpm install
$pnpm add @tennantite/uinpm installs the compiled package; use the CLI copy above to adapt the source.
Source
packages/ui/src/screens/containers/crafting-screen/index.tsxThe npm package keeps the source tree, so you can copy and adapt it directly.