@dumiflex/wp-kit (英语)
Vue 3 组件套件,其主题为:按钮,字段,选择,复选框,开关,芯片,卡片,表格,对话框,抽屉,弹出器,菜单,工具提示,分页,滑动器,颜色,日期和图标拾取器,列表,土司,代码和diff视图. 主题是设计符号,6个彩色调色板和7个外观(橡子,类型,边框). 这是为 通卡管道,一个 ComfyUI 扩展,并在任何 Vue 3 + Vite app 中工作.
每个作品都读取了CSS自定义属性,因此它会收录所坐入的应用程序的颜色,角和类型.
看每一块活地,用它的时间: dumiflex.github.io/wp-kit (英语)。网站有一个调色板、外观和光线或暗色的切换器.
安装
npm install @dumiflex/wp-kit vue primeicons
# or: pnpm add @dumiflex/wp-kit vue primeicons
货包船的来源.vue, (中文(简体) ), .ts 和 CSS) 没有构建步骤,您的 Vite 应用程序会编译它导入的部件 。 单位 vite.config数字 :
export default defineConfig({
plugins: [vue()],
resolve: { dedupe: ["vue"] }, // one Vue, yours
optimizeDeps: { exclude: ["@dumiflex/wp-kit"] }, // .vue files go through your Vue plugin
});
使用
一次导入一个文件 。 没有枪管文件,所以只有捆绑船你使用:
import "primeicons/primeicons.css";
import "@dumiflex/wp-kit/theme/tokens.css";
import "@dumiflex/wp-kit/theme/palettes.css";
import "@dumiflex/wp-kit/theme/looks.css";
import "@dumiflex/wp-kit/button.css";
import Button from "@dumiflex/wp-kit/Button.vue";
import Chip from "@dumiflex/wp-kit/Chip.vue";
<Button variant="primary" icon="pi-plus" @click="add">Add</Button>
<Chip tone="warn" icon="pi-exclamation-triangle">2 conflicts</Chip>
<Chip :pressed="tag === 'portrait'" :count="12" size="sm" @click="tag = 'portrait'">portrait</Chip>
挑个调色板看看 <html>数字 : data-wp-palette="…", (中文(简体) ), data-wp-look="…",和阶级 wp-theme-light 用于光线模式。 网站列出全部,并展示出每个作品的道具和一例.
如果您已经导入工具包为 @/kit/...,别名 @/kit 改为 node_modules/@dumiflex/wp-kit/src。 。 。 .
您的应用程序提供的
-
第3.5号 财务报告和审定财务报表 缩略语 7 (同类依附. 图标是
pi pi-*课程。 工具箱在运行时没有进口其他东西. -
一个主题: 工具箱上面的单子。 带有自己颜色表的主机可以定义在
SHARED_TOKENS改用只读那些的片段. -
如果您的应用程序使用级联层, 则图层顺序 (道风四有. 少数作品(工具提示、波波弗、 Dropdown Menu 、 入学班)将规则放入
@layer wp-extension,因此一个主机页面的无层CSS赢得了一场冲突(在ComfyUI画布上保持了套件的礼貌). 他们的轮廓被画成环状,所以像泰尔温德的飞行前(英语:border-width: 0)不能剥去. 如果您的 CSS 已分层, 请在页面中声明顺序<head>,在样式表之前,将套件放在重置上方和公用事业下方:<style>@layer theme, base, wp-extension, components, utilities;</style>
版本数
语义版本。在 1.0 下,一个小版本可以打破: 更改日志 在你撞倒之前。 每一份新闻稿都以出处发表在CI上.
链接
许可证
GPL-3.0-或-后期. 版权(C)2026 DumiFlex.