文档目录

网格

按列数 / 行数 / 间距编排物品格的纯布局网格。

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

export function GridDemo() {
  return (
    <div className="mc-tex-panel inline-block p-6">
      <Grid columns={9}>
        {Array.from({ length: 27 }, (_, index) => (
          <Slot key={index} selected={index === 4}>
            {index === 4 ? <Icon name="diamond" /> : null}
          </Slot>
        ))}
      </Grid>
    </div>
  );
}

安装

CLI 拷贝

$npx shadcn add @tennantite/grid

npm 直装

$pnpm add @tennantite/ui

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

用法

npm 导入

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

CLI 拷贝导入

import { Grid } from "@/components/tennantite/grid";

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

export function GridDemo() {
  return (
    <div className="mc-tex-panel inline-block p-6">
      <Grid columns={9}>
        {Array.from({ length: 27 }, (_, index) => (
          <Slot key={index} selected={index === 4}>
            {index === 4 ? <Icon name="diamond" /> : null}
          </Slot>
        ))}
      </Grid>
    </div>
  );
}

API Reference

Prop	Type	Default	描述
cellSize	number	18	单元格边长（GUI px，默认 18 —— 原版槽位）。
columns	number	—	列数（规格 §5 #2）。
gap	number	0	单元格间距（GUI px，默认 0 —— 原版槽位紧邻）。
rows	number	—	行数（省略时按内容自动）。

源码

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

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