# @devslab/dds-solid 中文文档 规范地址：https://npmcn.com/package/%40devslab/dds-solid/ 版本：0\.33\.0 npm 元数据更新时间：2026-11-11T18:59:13.545Z 中文译文更新时间：2026-11-12T04:13:54.492Z 软件包许可：SEE LICENSE IN LICENSE 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40devslab/dds-solid 原文对照：https://npmcn.com/package/%40devslab/dds-solid/?lang=original 项目主页：https://devslab.kr/brand/ 源码仓库：https://github.com/devslab-kr/dds ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1 MB，150 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：7 个 - peer 依赖：solid-js 1\.9\.15 - 首次发布：2026-08-30T20:25:04.172Z - 最新版本发布：2026-11-11T18:59:13.191Z - 近 30 天下载量：3096（2026-10-12 至 2026-11-10，npm 官方下载统计） - 已发布版本数：46（近 12 个月 46 个） ## 中文简介 DevsLab 设计系统的可访问固态JS原始 ## 安装 ```sh npm install @devslab/dds-solid ``` 也可以使用：`pnpm add @devslab/dds-solid`、`yarn add @devslab/dds-solid`、`bun add @devslab/dds-solid` ## README # @devslab/ds-固态 Public SolidJS原始为DDS所使用. 导入 `@devslab/dds-solid/styles.css` 在应用程序外壳中,然后消耗来自 `@devslab/dds-solid`。 。 。 . 国家组成部分接受两种受控部件(`value`编号 :`open`编号 :`checked`和 不受管制(`defaultValue`编号 :`defaultOpen`编号 :`defaultChecked`(d) 表格。 对话框拥有 焦点陷阱/返回和逃逸/解雇;Tabs执行WAI-ARIA 键盘模型; ToastProvider 拥有生命周期计时器; 工具提示需要渲染 说吧 `aria-describedby` 总是附着在实际触发器上. 通过本地化 `dismissLabel` 改为 `ToastProvider` 当土司需要手动 解除控制 解除控制 在离开时保留现有的提供者 API 退出控件,所以软件包从不释放出一个英文可访问名称倒置. 使用互动原始 [Ark UI 方舟飞行器](https://ark-ui.com/) 内部, 而 DDS 拥有 公共API和视觉标志。 现有进口和回调值保持不变 一样 见 [迁移指南](https://npmcn.com/package/docs/ark-migration.md) 详细信息. `RadioGroup` 添加标签组 `options` (单位:千美元)`value`, (中文(简体) ), `label`选项 `disabled`),与 `name`, (中文(简体) ), `value`编号 :`defaultValue` 财务报告和审定财务报表 `onValueChange`。现有的独立 `Radio` 仍为本地人。 使用一个应用程序级别 `ToastProvider`; 输入本地化 `regionLabel` 如果通知区域需要一个名称。 提示计时器暂停期间 指针/焦点交互以及浏览器页面闲置时. 非阳性期限 继续敬酒直到解散. ## Async Toast 和动作 内部 `ToastProvider`, (中文(简体) ), `useToast()` 返回时 `show`, (中文(简体) ), `loading`, (中文(简体) ), `update`, (中文(简体) ), `promise`, (中文(简体) ), `dismiss` 财务报告和审定财务报表 `clear`所有身份证和寿命周期状态都属于 供养. A 类 `loading` 语气持续到更新或取消为止 是装饰性的,所以提供一条描述工作的信息. ```tsx const toast = useToast(); const id = toast.loading({ message: "Saving changes" }); toast.update(id, { message: "Changes saved", tone: "success" }); const task = toast.promise(() => saveChanges(), { loading: { message: "Saving changes" }, success: { message: "Changes saved" }, error: { message: "Could not save changes" }, }); // The same ID is available immediately; awaiting preserves the operation's result/error. const saved = await task; toast.show({ message: "Changes saved", action: { label: "View changes", onClick: () => openChanges(saved) }, }); ``` `update(id, patch)` 保留省略的字段,并更改土司的位置。 一个 明确 `undefined` 重新设置默认的可选字段; `action: null` 删除动作。 未知,过期和开除的ID被忽略. 动作是 土生土长的按钮:它先解除了土司,然后再次召回 不提交周围表格. `promise` 接受承诺或一次性工厂,包括同步投掷. 内容 `success` 财务报告和审定财务报表 `error` 输入也可以是同步函数,接收 结果或原始错误。 它将终端输入合并到加载输入中, 默认终端音符为成功/危险,并使用提供者的常态 装入后持续时间。 它回来了 `Promise & { readonly id: string }`。 。 。 . 处理拒绝行动,因为你愿意做任何其他承诺。 解散 清场, 关闭、激活动作、手动更新或处理提供者 取代待发通知;和解仍送达呼叫者,但 不运行其终端信息厂或重新创建通知。 如果有的话 终端信息厂丢出,当前通知被驳回 原操作结果保留. 行动和承诺 重新尝试、取消或推断企业的成功. ## 按钮装入 `loading` 保留按钮大小和可访问名称:标签被隐藏,而不是被删除 旋转器被拉在上面,所以它旁边的控件不动,被包裹的标签也不包 再来一次(D-043) 装入时保持标签不变;隐藏文本仍然设置宽度. ## 创建待定动作 屏幕上有数个按钮 需要知道哪个开始工作 传出一面共享旗帜 切入每个按钮,然后按下一键旋转. ```tsx import { Button, createPendingAction } from "@devslab/dds-solid"; const action = createPendingAction<"approve" | "reject">(); ``` `is(key)` 仅适用于运行中的动作,因此只有控制显示进度; `busy()` 锁住其他的. `run` 清除状态 当任务解决, 传递其错误, 并且做 其它动作运行时无任何结果, 因此第二次点击不能启动第二次请求 。 过 `{ replace: true }` 最近的请求应当胜出,例如重新装入列表. 任务收到 `AbortSignal` 当运行停止计数时中止: `reset()`运行 换掉它,否则部件就会消失 检查 `signal.aborted` 每个人等待后,再摸摸 屏幕,或将信号传递给 `fetch`;没有单独的请求计数器或"仍在挂"旗帜 需要帮助。 晚完成就永远无法清除新的行动. ```tsx const list = createPendingAction<"search" | "page">(); const reload = (key: "search" | "page") => list.run(key, async (signal) => { const rows = await loadRows(filter()); if (!signal.aborted) setRows(rows); }, { replace: true }); ``` ## 控制台壳导航组 团体默认继续开放。 设定 `collapsible: true` 给它一个稳定 `id` 用于扩展状态(否则键是 `group-${index}`) (中文(简体) ). 只打开活动相撞组, 使用相同的路由匹配和项目 `active` 覆盖作为导航链接. `LeftNav` 也可以单独导出,用于在自己的布局中编译菜单。 这需要 `surface`, (中文(简体) ), `activePath`, (中文(简体) ), `nav`, (中文(简体) ), `labels` (单位:千美元)`nav` 财务报告和审定财务报表 `badge`),下面的扩展道具,以及可选的 `onNavigate`在里面编曲 `ConsoleShell`,通过它作为 `navigation={}`;槽取代内置菜单和外壳 `nav` 可省略。 外壳继续拥有品牌,标题,内容和移动抽屉. 对于自定义菜单,请连接 `onNavigate` 任何特定应用程序的抽屉处理. ```tsx const [expandedGroups, setExpandedGroups] = createSignal(["build"]); }, ] }]} expandedGroups={expandedGroups()} onExpandedGroupsChange={setExpandedGroups} >Content ``` 使用 `defaultExpandedGroups` 初始状态失控; `[]` 明确关闭每个相撞组。 使用 `expandedGroups` 财务报告和审定财务报表 `onExpandedGroupsChange` 在控制状态。 后来由路由驱动的扩展和持久性属于应用. 项目 `icon` 装饰; `label` 仍然提供链接名称和徽章保持其无障碍标签. ## 日期选择器 ```tsx import { DatePicker } from "@devslab/dds-solid"; const [date, setDate] = createSignal(""); ``` Ark UI拥有焦点,选择和键盘导航;DDS拥有造型. 已控制 `value` 用途 `YYYY-MM-DD` 或者一个空字符串. `locale` 默认为 `ko-KR`, (中文(简体) ), `timeZone` 改为 `Asia/Seoul`; 可选 `min`, (中文(简体) ), `max` 财务报告和审定财务报表 `disabled` 限制选择。 日出时用时彼克. ## 时间选择器 ```tsx import { TimePicker } from "@devslab/dds-solid"; const [closing, setClosing] = createSignal("18:00"); ``` 替换本地 `type="time"` 与 Combobox 控件和列表一起下拉 。 值是24小时 `HH:MM` 或空字符串; `HH:MM:SS` 从服务器显示为 `HH:MM`列表步骤 `step` 分钟( 默认 10 ) , 并打开以选定位置为中心; 键入 `10` 过滤器至10:00-10:50,并打出完整的打出时间(甚至从台阶上跳出,例如. `10:45`)与 Enter 或离栏时接受. ## 输入、选择、重叠和共享日历 输入/输入组是通用的本土输入,不只搜索,有标签放置和明确的动作. Combobox/SelectPicker支持固定行虚拟化; DropdownMenu/Popover提供可访问的覆盖; Calendar/DatePicker共享日历视图. 分块控制选择几个可见选项之一(radio-group semics); Number Input是一个本地化的数字字段,带有可选的 − / + 按钮和一个单位,其值为数字或为空. 使用明确的子路径 `@devslab/dds-solid/input`, (中文(简体) ), `/combobox`, (中文(简体) ), `/select-picker`, (中文(简体) ), `/dropdown-menu`, (中文(简体) ), `/popover`, (中文(简体) ), `/calendar`, (中文(简体) ), `/date-picker`, (中文(简体) ), `/time-picker`, (中文(简体) ), `/segmented-control`, (中文(简体) ), `/number-input`, (中文(简体) ), `/date-range-picker`, (中文(简体) ), `/month-picker`,或现有的根导出。 继续导入 `styles.css` 一次 一次吗 见 [通用使用指南](https://github.com/devslab-kr/dds/blob/main/docs/components-input-choice-calendar.md)。 。 。 . 输入/输入组是通用的本土输入,不只搜索,有标签放置和明确的动作. Combobox/SelectPicker支持固定行虚拟化; DropdownMenu/Popover提供可访问的覆盖; Calendar/DatePicker共享一个日历视图,DateRangPicker(起始~结束期)和MonthPicker(YYY-MM)也使用该视图. ## 共享应用程序布局 布局,LftNav和TopNav使用常见的几何和打字规则. 见 [组成和确切的维度](https://npmcn.com/package/docs/layouts.md)。 。 。 . ## 常见问题 ### @devslab/dds-solid 是什么？ DevsLab 设计系统的可访问固态JS原始 ### 如何安装 @devslab/dds-solid？ 在项目目录运行 npm install @devslab/dds-solid，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：solid-js（1\.9\.15）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @devslab/dds-solid 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @devslab/dds-solid 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @devslab/dds-solid 可以商用吗？ @devslab/dds-solid 使用 SEE LICENSE IN LICENSE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。 ### @devslab/dds-solid 的下载量有多少？ 根据 npm 官方下载统计，@devslab/dds-solid 在 2026/10/12 – 2026/11/10 这 30 天内被下载 3,096 次，日均约 103 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @devslab/dds-solid 还在维护吗？ 最新版本 0\.33\.0 发布于 2026/11/12（今天）；至今共发布 46 个版本，其中过去 12 个月发布了 46 个；首次发布于 2026/08/31。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。