文档目录

物品格

凹槽视觉的最小物品格，可选选中白框。

import { Grid } from "../grid/index";
import { Icon } from "../icon/index";
import { Slot } from "./index";

/**
 * Slot / Grid 预览用例（规格 §5 #2）
*/
export function SlotDemo() {
  return (
    <div className="mc-tex-panel inline-block p-6">
      <Grid columns={4}>
        <Slot selected>
          <Icon name="grass-block" />
        </Slot>
        <Slot />
        <Slot />
        <Slot />
        <Slot />
        <Slot />
        <Slot />
        <Slot />
      </Grid>
    </div>
  );
}

安装

CLI 拷贝

$npx shadcn add @tennantite/slot

npm 直装

$pnpm add @tennantite/ui

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

用法

npm 导入

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

CLI 拷贝导入

import { Slot } from "@/components/tennantite/slot";

import { Grid } from "../grid/index";
import { Icon } from "../icon/index";
import { Slot } from "./index";

/**
 * Slot / Grid 预览用例（规格 §5 #2）
*/
export function SlotDemo() {
  return (
    <div className="mc-tex-panel inline-block p-6">
      <Grid columns={4}>
        <Slot selected>
          <Icon name="grass-block" />
        </Slot>
        <Slot />
        <Slot />
        <Slot />
        <Slot />
        <Slot />
        <Slot />
        <Slot />
      </Grid>
    </div>
  );
}

API Reference

Prop	Type	Default	描述
bare	boolean	false	不绘制槽位纹理（用于 HUD 热键栏等自带槽位纹理的容器）。
frameClassName	string	"mc-tex-slot"	自定义槽框纹理类（默认 `mc-tex-slot`；mod 界面可传自己的槽框）。
ghost	GuiSpriteName	—	空槽 ghost 精灵。
selected	boolean	false	选中态：1 GUI px 白色内框。
size	number	18	边长（GUI px，默认 18 —— 原版槽位）。

源码

packages/ui/src/containers/slot/index.tsx

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