文档目录
Mod 进度条
通用 mod 进度条:轨道 + 按比例裁剪的填充层,坐标为面板 GUI px。
import { ModProgress } from "./index";
const FILL = { background: "#55ff55", height: "100%", width: "100%" };
export function ModProgressDemo() {
return (
<div className="relative h-24 w-48">
<ModProgress
direction="right"
fill={<div style={FILL} />}
height={12}
label="横向进度"
left={8}
progress={0.6}
top={8}
width={80}
/>
<ModProgress
ariaValue="percent"
direction="up"
fill={<div style={{ ...FILL, background: "#3f76e4" }} />}
height={40}
label="纵向百分比"
left={104}
max={100}
top={8}
value={35}
width={12}
/>
</div>
);
}
安装
$pnpm add @tennantite/commonnpm 方式安装编译产物;需要改造源码请用上方的 CLI 拷贝安装。
源码
packages/mods-core/src/shared/mod-progress/index.tsxnpm 包保留源码目录,可直接复制改造。