harmo-ui
复制的组件 Harmocss优先 用于仪表板和应用程序的UI库,以及它们的样式, 把它们变成你的。
使用
从项目的根目录:
npx harmo-ui add tabs
复制制表符,它的样式,和任何它需要的:
src/components/harmo/
harmo.css
tokens.css
tabs/Tabs.tsx
tabs/TabNav.tsx
tabs/useTabsMotion.ts
tabs/tabs.css
provider/HarmoProvider.tsx
lib/children.ts
lib/withClass.ts
进口 harmo.css 一次,在根布局或入口文件中。它列出令牌和
每个组件的样式,以及 npx harmo-ui add 使它保持最新。然后使用
组件:
import "@/components/harmo/harmo.css";
import { Tabs, TabList, Tab, TabPanel } from "@/components/harmo/tabs/Tabs";
@/ 是Next.js项目默认设置的路径别名。没有亲戚,就用亲戚
路径。
你可以修改这些文件,只剩下React可以依赖。他们需要反应 19.3或更高版本和TypeScript。
命令
| 命令 | 效果 |
|---|---|
npx harmo-ui add <component...> | 复制组件及其样式和所需的内容 |
npx harmo-ui add --all | 复制每个组件 |
npx harmo-ui list | 列出组件 |
选择 add | 效果 |
|---|---|
-p, --path <folder> | 在哪里复制它们。默认情况下 components/harmo,或 src/components/harmo 如果项目有 src 文件夹中。每次使用另一个文件夹时传递它 |
-o, --overwrite | 替换与Harmo不同的文件,无需询问 |
--dry-run | 表明什么会改变,但什么也改变不了 |
更新
复制的文件不会自己更新,所以它们也不会得到Harmo的修复。
要获取更新的版本,请运行 npx harmo-ui@latest add <component>. 它永远不会取代
你没有询问就更改的文件,以及它不能询问的文件保持原样。
要通过包管理器进行更新,请安装以下包:
bun add @harmo-ui/css @harmo-ui/react
为项目选择一种方式:复制的组件和安装的组件都有自己的
自己的 HarmoProvider,因此使用两者的项目需要将其应用程序封装在两者中。
了解更多
哈莫在 0.x,所以它的api在不同的版本之间可能会发生变化。