Documentation

MekanismList

Mekanism 滚动列表（GuiScrollList 系共享件）：list 行 12 高（list/base|hovered|selected + list/slot 图标槽 + 细滚动条）、filter 行 29 高（list/filter/base|hovered + element_holder 滚动槽 + scroll/bar 把手），数据全量注入、渲染层按可见行数截断。

import type { MekanismListRow } from "../mekanism-list/index";
import { MekanismList } from "../mekanism-list/index";

const MODULE_ROWS: MekanismListRow[] = [
  { icon: "item/upgrade/speed", id: "speed", label: "速度升级" },
  { icon: "item/upgrade/energy", id: "energy", label: "能量升级" },
  { icon: "item/upgrade/filter", id: "filter", label: "过滤升级" },
  { id: "muffling", label: "消音升级" },
  { icon: "item/upgrade/anchor", id: "anchor", label: "锚点升级" },
  { icon: "item/upgrade/chemical", id: "chemical", label: "化学升级" },
];

const FILTER_ROWS: MekanismListRow[] = [
  { icon: "item/upgrade/filter", id: "tag", label: "标签过滤器" },
  { icon: "item/upgrade/filter", id: "item", label: "物品过滤器" },
  { icon: "item/upgrade/filter", id: "mod", label: "模组过滤器" },
  { id: "material", label: "材质过滤器" },
];

export function MekanismListDemo() {
  return (
    <div className="relative h-44 w-96">
      <MekanismList left={0} rows={MODULE_ROWS} scroll={0.2} selectedId="filter" top={0} visibleRows={4} width={120} />
      <MekanismList left={140} rows={FILTER_ROWS} top={0} variant="filter" visibleRows={3} width={170} />
    </div>
  );
}

Install

$pnpm add @tennantite/mekanism

npm installs the compiled package; use the CLI copy above to adapt the source.

Source

packages/mekanism/src/mekanism-list/index.tsx

The npm package keeps the source tree, so you can copy and adapt it directly.