【免费下载链接】dialkitA library to help you dial in interface parameters of any kind项目地址https://gitcode.com/gh_mirrors/di/dialkit点击查看免费下载DialKit 是一款用于实时调试界面参数的开源组件库通过滑块、开关、颜色选择器、XY Pad、弹簧动画等 13 种控件帮你把任意界面的可调参数拨到最舒服的状态。它支持 React、Solid、Svelte、Vue 和原生 JavaScript一行配置就能在运行的应用里生成一个可拖拽的调参面板。本文用一份完整清单带你逐一认识这 13 种控件每种怎么定义、返回什么值、适合调什么参数。13 种控件速览DialKit 用一个普通对象描述所有控件键名自动变成标签camelCase 会转成单词返回值保持相同的嵌套层级。核心分发逻辑在 ControlRenderer.tsx 中共识别以下控件类型#控件配置写法示例返回值典型用途1滑块 Sliderradius: [24, 0, 64]number圆角、间距、尺寸2步进滑块spacing: [16, 0, 64, 2]number需要整数步进的值3推断滑块scale: 1.2number快速暴露一个数值4开关 Togglevisible: trueboolean显隐、开关功能5文本 Texttitle: Hellostring文案、备注6颜色 Coloraccent: #a78bfaCSS 颜色字符串主题色、高亮色7下拉 Select{ type: select, options: [...] }选中项字符串布局模式、档位选择8图片 Image{ type: image, options: [...] }URL 或 data URL封面图、头像9XY Pad{ type: pad }{ x, y }阴影偏移、落点位置10弹簧 Spring{ type: spring, bounce: 0.2 }TransitionConfig弹性动画11缓动 Easing{ type: easing, ease: [0.25, 0.1, 0.25, 1] }TransitionConfig曲线动画12动作 Action{ type: action }触发onAction(path)重播、重置按钮13文件夹 Folder任意嵌套对象嵌套值对象参数分组折叠下面按类别逐个讲解 ️滑块三兄弟数字参数的主力控件滑块是调参面板里出现频率最高的控件DialKit 提供了三种写法元组滑块[默认值, 最小值, 最大值]可选第四项作为步进值。步进滑块[16, 0, 64, 2]表示以 2 为步长拖动适合间距这类整数参数。推断滑块直接写一个裸数字如scale: 1.2DialKit 会自动推断范围。范围在 0–1 之间时步进 0.011–10 时步进 0.110–100 时步进 1超过 100 时步进 10负数则自动对称扩展。交互细节同样贴心点击或拖动调整聚焦后按Enter可直接输入数值悬停在数字上点击也能快速编辑拖出的值会被自动钳制在范围内。开关、文本与下拉表单三件套开关只需给一个布尔值const config { visible: true, title: Hello, photoShape: { type: select, options: [{ value: portrait, label: Portrait }], default: portrait, }, };开关 Toggle布尔值即默认状态点按翻转。文本 Text字符串即默认值输入框最多长到五行然后滚动回车换行。如果某个字符串看起来像颜色值如#a78bfa字样本身却想当文本处理可显式写{ type: text }。下拉 Selectoptions支持字符串或{ value, label }对象默认选中第一项空列表的下拉会被禁用。颜色选择器支持 OKLCH 与现代色彩空间颜色控件的门槛极低——直接写一个 CSS 颜色字符串即可accent: #a78bfa, highlight: oklch(0.7 0.2 145 / 0.8),hex3/4/6/8 位、RGB、HSL、OKLCH、Display P3 都会被自动识别。调色器提供 Hex、OKLCH、Display P3 三种输出格式还带色相和透明度滑杆当颜色从宽色域转换到窄色域时会自动降低饱和度以保持亮度和色相不变。需要transparent这类特殊值时用显式写法{ type: color, default: transparent }。图片控件本地上传不上传服务器图片控件有两种典型用法给出候选图片列表供切换或完全留空供用户上传。cover: { type: image, options: [/images/coast.jpg] }, avatar: { type: image }, // 无选项从空开始支持上传支持上传或拖入最大 10 MB的图片文件会在浏览器本地读成 data URL不会发送到任何服务器非常适合调试封面、头像、背景图类参数。XY Pad 控件一个旋钮调两个参数XY Pad 是 DialKit 最有辨识度的控件在二维面板上拖一个点同时调节 X 和 Y 两个值。position: { type: pad }, timing: { type: pad, x: [0.3, 0.1, 1, 0.01], y: [0.2, 0, 1, 0.01], labels: { x: Duration, y: Bounce }, }每条轴复用滑块的[默认, 最小, 最大, 步进?]写法缺省为[0, -1, 1, 0.01]。X 向右增大Y向上增大点击靠近网格交点时会自动吸附。按住Shift拖动可锁定一条轴双击或按Home恢复默认Escape取消拖动。返回值始终是{ x, y }对象坐标轴的自定义标签不影响键名。阴影偏移、动画起点这类双参数场景非常合适。弹簧与缓动动画调参专用编辑器spring和easing两种定义打开的是同一个过渡编辑器提供三种模式模式可调参数Easing 缓动时长 贝塞尔曲线四个坐标手柄可拖动也可键盘微调Time 时间visualDuration与bounce时长 回弹强度Physics 物理stiffness刚度、damping阻尼、mass质量spring: { type: spring, visualDuration: 0.3, bounce: 0.2 }, physics: { type: spring, stiffness: 200, damping: 25, mass: 1 }, easing: { type: easing, duration: 0.3, ease: [0.25, 0.1, 0.25, 1] },切换模式时会保留该模式上次的编辑状态。由于用户可以在模式间切换返回值类型是TransitionConfigSpringConfig与EasingConfig的联合。贝塞尔手柄支持方向键 0.01 步进、Shift 方向键 0.1 步进。动作按钮与文件夹行为与分组动作 Action不是可写的值而是一个按钮点击后以完整点路径调用你传入的onAction回调。const values useDialKit(Card, { replay: { type: action, label: Replay animation }, shadow: { _collapsed: true, // 文件夹初始折叠 blur: [12, 0, 40], }, }, { onAction: (path) { if (path replay) replayAnimation(); }, });文件夹 Folder则是任何嵌套对象都会自动生成的分组容器可无限嵌套_collapsed: true让文件夹初始关闭它只是 UI 元数据不会出现在返回值里。面板顶部工具条的版本菜单还能把当前所有控件值存为版本Preset用Copy可一键复制回生产配置 13 种控件组合起来长什么样真实项目里一个面板通常混合使用多种控件。官方示例 PhotoStack.tsx 就是一个缩影标题用文本控件、照片形状用下拉、阴影色用颜色、偏移和缩放用文件夹内的一组滑块、过渡动画用弹簧、下一张用动作按钮——再加上shortcuts选项给滑块绑定快捷键按住 X 滚动调偏移按住 O 精细调阴影透明度整个页面变成了一台参数调音台。面板还支持快捷键shortcuts选项按控件路径绑定按键支持fine / normal / coarse三档精度持久化persist: true把值和版本存入localStorage刷新页面参数不丢五种框架适配同一套配置在 React、Solid、Svelte、Vue、Vanilla 中行为一致。如何上手 DialKit 控件想调什么用什么控件单个数值圆角、透明度滑块元组或裸数字是/否状态开关标题、提示语文本有限几个档位下拉主题色、强调色颜色封面、头像图片双参数联动偏移、落点XY Pad动画手感弹簧 / 缓动触发一个操作动作参数太多想分组文件夹安装并挂载根组件后写一个配置对象就能得到上表全部能力具体定义格式可查阅 docs/reference.md 的 Controls 一节类型与默认值的推断规则都来自 DialStore.ts 中的DialConfig。无论你是做产品页面、组件库还是交互动效这 13 种控件基本覆盖了所有想在运行中拨一拨的界面参数 赞分享【免费下载链接】dialkitA library to help you dial in interface parameters of any kind项目地址https://gitcode.com/gh_mirrors/di/dialkit点击查看免费下载相关推荐为什么鸿蒙开发还需要VSCodearkTS插件全功能盘点与快速上手指南为什么鸿蒙开发还需要VSCodearkTS插件全功能盘点与快速上手指南 如果你习惯轻量编辑器那么 VSCode 鸿蒙 ArkTS 插件Nailys Ar开发工具IDEOpenHarmonySOpt项目异步编程与多线程性能优化核心技巧SOpt项目异步编程与多线程性能优化核心技巧 SOpt项目是一个包含多种编程语言代码示例的开源项目其中异步编程与多线程技术的应用是提升程序性能的关键。本文将antd Segmented 组件 Token 定制用 ConfigProvider 覆盖分段控制器的颜色体系antd Segmented 组件 Token 定制用 ConfigProvider 覆盖分段控制器的颜色体系 Ant Designantd的 Segme前端UI组件设计系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
【免费下载链接】dialkitA library to help you dial in interface parameters of any kind项目地址https://gitcode.com/gh_mirrors/di/dialkit点击查看免费下载DialKit 是一款用于实时调试界面参数的开源组件库通过滑块、开关、颜色选择器、XY Pad、弹簧动画等 13 种控件帮你把任意界面的可调参数拨到最舒服的状态。它支持 React、Solid、Svelte、Vue 和原生 JavaScript一行配置就能在运行的应用里生成一个可拖拽的调参面板。本文用一份完整清单带你逐一认识这 13 种控件每种怎么定义、返回什么值、适合调什么参数。13 种控件速览DialKit 用一个普通对象描述所有控件键名自动变成标签camelCase 会转成单词返回值保持相同的嵌套层级。核心分发逻辑在 ControlRenderer.tsx 中共识别以下控件类型#控件配置写法示例返回值典型用途1滑块 Sliderradius: [24, 0, 64]number圆角、间距、尺寸2步进滑块spacing: [16, 0, 64, 2]number需要整数步进的值3推断滑块scale: 1.2number快速暴露一个数值4开关 Togglevisible: trueboolean显隐、开关功能5文本 Texttitle: Hellostring文案、备注6颜色 Coloraccent: #a78bfaCSS 颜色字符串主题色、高亮色7下拉 Select{ type: select, options: [...] }选中项字符串布局模式、档位选择8图片 Image{ type: image, options: [...] }URL 或 data URL封面图、头像9XY Pad{ type: pad }{ x, y }阴影偏移、落点位置10弹簧 Spring{ type: spring, bounce: 0.2 }TransitionConfig弹性动画11缓动 Easing{ type: easing, ease: [0.25, 0.1, 0.25, 1] }TransitionConfig曲线动画12动作 Action{ type: action }触发onAction(path)重播、重置按钮13文件夹 Folder任意嵌套对象嵌套值对象参数分组折叠下面按类别逐个讲解 ️滑块三兄弟数字参数的主力控件滑块是调参面板里出现频率最高的控件DialKit 提供了三种写法元组滑块[默认值, 最小值, 最大值]可选第四项作为步进值。步进滑块[16, 0, 64, 2]表示以 2 为步长拖动适合间距这类整数参数。推断滑块直接写一个裸数字如scale: 1.2DialKit 会自动推断范围。范围在 0–1 之间时步进 0.011–10 时步进 0.110–100 时步进 1超过 100 时步进 10负数则自动对称扩展。交互细节同样贴心点击或拖动调整聚焦后按Enter可直接输入数值悬停在数字上点击也能快速编辑拖出的值会被自动钳制在范围内。开关、文本与下拉表单三件套开关只需给一个布尔值const config { visible: true, title: Hello, photoShape: { type: select, options: [{ value: portrait, label: Portrait }], default: portrait, }, };开关 Toggle布尔值即默认状态点按翻转。文本 Text字符串即默认值输入框最多长到五行然后滚动回车换行。如果某个字符串看起来像颜色值如#a78bfa字样本身却想当文本处理可显式写{ type: text }。下拉 Selectoptions支持字符串或{ value, label }对象默认选中第一项空列表的下拉会被禁用。颜色选择器支持 OKLCH 与现代色彩空间颜色控件的门槛极低——直接写一个 CSS 颜色字符串即可accent: #a78bfa, highlight: oklch(0.7 0.2 145 / 0.8),hex3/4/6/8 位、RGB、HSL、OKLCH、Display P3 都会被自动识别。调色器提供 Hex、OKLCH、Display P3 三种输出格式还带色相和透明度滑杆当颜色从宽色域转换到窄色域时会自动降低饱和度以保持亮度和色相不变。需要transparent这类特殊值时用显式写法{ type: color, default: transparent }。图片控件本地上传不上传服务器图片控件有两种典型用法给出候选图片列表供切换或完全留空供用户上传。cover: { type: image, options: [/images/coast.jpg] }, avatar: { type: image }, // 无选项从空开始支持上传支持上传或拖入最大 10 MB的图片文件会在浏览器本地读成 data URL不会发送到任何服务器非常适合调试封面、头像、背景图类参数。XY Pad 控件一个旋钮调两个参数XY Pad 是 DialKit 最有辨识度的控件在二维面板上拖一个点同时调节 X 和 Y 两个值。position: { type: pad }, timing: { type: pad, x: [0.3, 0.1, 1, 0.01], y: [0.2, 0, 1, 0.01], labels: { x: Duration, y: Bounce }, }每条轴复用滑块的[默认, 最小, 最大, 步进?]写法缺省为[0, -1, 1, 0.01]。X 向右增大Y向上增大点击靠近网格交点时会自动吸附。按住Shift拖动可锁定一条轴双击或按Home恢复默认Escape取消拖动。返回值始终是{ x, y }对象坐标轴的自定义标签不影响键名。阴影偏移、动画起点这类双参数场景非常合适。弹簧与缓动动画调参专用编辑器spring和easing两种定义打开的是同一个过渡编辑器提供三种模式模式可调参数Easing 缓动时长 贝塞尔曲线四个坐标手柄可拖动也可键盘微调Time 时间visualDuration与bounce时长 回弹强度Physics 物理stiffness刚度、damping阻尼、mass质量spring: { type: spring, visualDuration: 0.3, bounce: 0.2 }, physics: { type: spring, stiffness: 200, damping: 25, mass: 1 }, easing: { type: easing, duration: 0.3, ease: [0.25, 0.1, 0.25, 1] },切换模式时会保留该模式上次的编辑状态。由于用户可以在模式间切换返回值类型是TransitionConfigSpringConfig与EasingConfig的联合。贝塞尔手柄支持方向键 0.01 步进、Shift 方向键 0.1 步进。动作按钮与文件夹行为与分组动作 Action不是可写的值而是一个按钮点击后以完整点路径调用你传入的onAction回调。const values useDialKit(Card, { replay: { type: action, label: Replay animation }, shadow: { _collapsed: true, // 文件夹初始折叠 blur: [12, 0, 40], }, }, { onAction: (path) { if (path replay) replayAnimation(); }, });文件夹 Folder则是任何嵌套对象都会自动生成的分组容器可无限嵌套_collapsed: true让文件夹初始关闭它只是 UI 元数据不会出现在返回值里。面板顶部工具条的版本菜单还能把当前所有控件值存为版本Preset用Copy可一键复制回生产配置 13 种控件组合起来长什么样真实项目里一个面板通常混合使用多种控件。官方示例 PhotoStack.tsx 就是一个缩影标题用文本控件、照片形状用下拉、阴影色用颜色、偏移和缩放用文件夹内的一组滑块、过渡动画用弹簧、下一张用动作按钮——再加上shortcuts选项给滑块绑定快捷键按住 X 滚动调偏移按住 O 精细调阴影透明度整个页面变成了一台参数调音台。面板还支持快捷键shortcuts选项按控件路径绑定按键支持fine / normal / coarse三档精度持久化persist: true把值和版本存入localStorage刷新页面参数不丢五种框架适配同一套配置在 React、Solid、Svelte、Vue、Vanilla 中行为一致。如何上手 DialKit 控件想调什么用什么控件单个数值圆角、透明度滑块元组或裸数字是/否状态开关标题、提示语文本有限几个档位下拉主题色、强调色颜色封面、头像图片双参数联动偏移、落点XY Pad动画手感弹簧 / 缓动触发一个操作动作参数太多想分组文件夹安装并挂载根组件后写一个配置对象就能得到上表全部能力具体定义格式可查阅 docs/reference.md 的 Controls 一节类型与默认值的推断规则都来自 DialStore.ts 中的DialConfig。无论你是做产品页面、组件库还是交互动效这 13 种控件基本覆盖了所有想在运行中拨一拨的界面参数 赞分享【免费下载链接】dialkitA library to help you dial in interface parameters of any kind项目地址https://gitcode.com/gh_mirrors/di/dialkit点击查看免费下载相关推荐为什么鸿蒙开发还需要VSCodearkTS插件全功能盘点与快速上手指南为什么鸿蒙开发还需要VSCodearkTS插件全功能盘点与快速上手指南 如果你习惯轻量编辑器那么 VSCode 鸿蒙 ArkTS 插件Nailys Ar开发工具IDEOpenHarmonySOpt项目异步编程与多线程性能优化核心技巧SOpt项目异步编程与多线程性能优化核心技巧 SOpt项目是一个包含多种编程语言代码示例的开源项目其中异步编程与多线程技术的应用是提升程序性能的关键。本文将antd Segmented 组件 Token 定制用 ConfigProvider 覆盖分段控制器的颜色体系antd Segmented 组件 Token 定制用 ConfigProvider 覆盖分段控制器的颜色体系 Ant Designantd的 Segme前端UI组件设计系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
