# @delement/ui 中文文档 规范地址：https://npmcn.com/package/%40delement/ui/ 版本：0\.9\.9-156 npm 元数据更新时间：2026-10-27T13:16:03.928Z 中文译文更新时间：2026-11-14T14:58:33.579Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40delement/ui 原文对照：https://npmcn.com/package/%40delement/ui/?lang=original 项目主页：https://ui.d-element.ru/ ## 关键信息（来自 npm 元数据） - 包体积（解压后）：5.1 MB，1352 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - Node.js 要求：\>=24 - 运行依赖：24 个 - peer 依赖：msw ^2\.15\.0，yup ^1\.7\.1，react ^19\.3\.1，i18next ^26\.5\.11，date-fns ^4\.4\.0，react-dom ^19\.3\.1，ssr-window ^5\.0\.1，react-imask ^7\.6\.1，react-select ^5\.10\.2，@fancyapps/ui ^6\.1\.14，react-i18next ^17\.1\.9，@web3r/flowerkit ^1\.2\.1，react-datepicker ^9\.1\.0，react-content-loader ^7\.1\.2，@pbe/react-yandex-maps ^1\.2\.5 - 首次发布：2024-02-29T14:40:15.091Z - 最新版本发布：2026-10-27T13:16:03.520Z - 近 30 天下载量：2009（2026-10-12 至 2026-11-10，npm 官方下载统计） - 已发布版本数：168（近 12 个月 32 个） ## 中文简介 TypeScript React UI 组件库,有插件,公用设施,无害环境管理模块,以及SSR友好架构. ## 安装 ```sh npm install @delement/ui ``` 也可以使用：`pnpm add @delement/ui`、`yarn add @delement/ui`、`bun add @delement/ui` ## README # TypeScript React UI 组件库 [![npm version](https://img.shields.io/npm/v/@delement/ui)](https://www.npmjs.com/package/@delement/ui) [![npm downloads](https://img.shields.io/npm/dm/@delement/ui)](https://www.npmjs.com/package/@delement/ui) [![license](https://img.shields.io/npm/l/@delement/ui)](https://npmcn.com/package/%40delement/ui/LICENSE) **损坏 UI** 是一个 TypeScript- First React UI 组件库,有插件,共享的公用设施,以及故事书文档. - [安装](https://npmcn.com/package/%40delement/ui/#readme-installation) - [快速启动](https://npmcn.com/package/%40delement/ui/#readme-quick-start) - [特征](https://npmcn.com/package/%40delement/ui/#readme-features) - [使用量](https://npmcn.com/package/%40delement/ui/#readme-usage) - [文档](https://npmcn.com/package/%40delement/ui/#readme-documentation) - [捐款](https://npmcn.com/package/%40delement/ui/#readme-contributing) 用于现代前端应用的建筑有: - 仅限无害环境管理的分发 - 可树摇动模块 - 有利于安全部门改革的架构 - 内建本地化支持 ## 特征 - 反应用于生产接口的 UI 组件 - 核心组件的基本无障碍默认值 - DOM 和 UX 工作流程的插件架构 - 通过类型脚本公开打字 `@delement/ui/typings` - 可动摇的无害环境管理模块 - 有利于安全部门改革的行为 - 故事书文件和实例 ## 为什么选择 Delement UI ? - 常见产品接口的反应组件 - DOM/UX工作流程的插件(形式、收藏、本地化等) - 用于React、Node、Webpack和MSW的工具包 - 通过输入的公开 API `@delement/ui/typings` - 准备使用样式捆绑和每个组件样式块 ## 安装 ```bash npm i @delement/ui ``` ## 快速启动 ```tsx import { Btn } from "@delement/ui/components"; export const App = () => ; ``` ## 使用量 ### 构成部分 ```ts // from directory import { Btn, Input, DatePicker, Map, Locale, /* etc */ } from "@delement/ui/components"; // or directly import { Btn } from "@delement/ui/components/btn"; ``` ### 插件 ```ts // from directory import { Collection, Localisation, FormValidation, /* etc */ } from "@delement/ui/plugins"; // or directly import { Collection } from "@delement/ui/plugins/collection"; ``` 组件/插件子路径使用通配符地图 `package.json`,包括筑巢 索引模块。 例如: ```ts import { BlockTable } from "@delement/ui/components/blockTable"; import { FormSend } from "@delement/ui/plugins/forms"; import type { TLocalisationSource } from "@delement/ui/plugins/localisation/types"; ``` 其子组件可使用于其父母: `BlockTable.Body`, (中文(简体) ), `BlockTable.Caption`, (中文(简体) ), `BlockTable.Cell`, (中文(简体) ), `BlockTable.Foot`, (中文(简体) ), `BlockTable.Head`, (中文(简体) ), `BlockTable.Row`, (中文(简体) ), `BlockTable.SortBtn`, (中文(简体) ), `Grid.Item`, (中文(简体) ), `Form.Block`, (中文(简体) ), `Form.Col`, (中文(简体) ), `Form.Field`, (中文(简体) ), `Form.Msg` 财务报告和审定财务报表 `Form.Row`。 。 。 . 替换以前命名的导入, 如 `BlockTableBody`, (中文(简体) ), `GridItem` 财务报告和审定财务报表 `FormField` 从主部件入口处取出,并有母进口和财产准入. ### 反应公用事业 ```ts // from directory import { useCN, useIO /* etc */ } from "@delement/ui/utils/react"; // or directly import { useCN } from "@delement/ui/utils/react/useCN"; ``` ### 服务器 HTML `getStaticMarkupForServer` 返回 HTML, 不在二者中自动打印 发展与生产 `SSG` 财务报告和审定财务报表 `SSR` 模式。 这个 `before`, (中文(简体) ), `after` 财务报告和审定财务报表 `getWithModifier` 选项仍然可用: ```tsx import { getStaticMarkupForServer } from "@delement/ui/utils/react"; const html = await getStaticMarkupForServer(
Hello
, { mode: "SSR" }); //
Hello
``` 之前收到的缩进和换行的产量现在是现在 紧凑. 在自己的工具中应用任何可选格式. `getPrettyHTML` 没有 从 `@delement/ui/utils`; 从消费者代码中删除该导入. 故事书片段保留其内部的 HTML formatter. ### 常数 ```ts import { constants } from "@delement/ui/constants"; ``` ### 网络包装公用事业 `getFilesWithContext` 仍然可用于加载图标、懒惰样式和其他 模块通过 `import.meta.webpackContext` webpack 应用程序中: ```ts import { getFilesWithContext } from "@delement/ui/utils/webpack"; ``` 直接的子路径也得到支持: ```ts import { getFilesWithContext } from "@delement/ui/utils/webpack/getFilesWithContext"; ``` Webpack 配置帮助器和插件已经从此包中删除. ### 样式( Bundle 或 Per- Content Cunks) 确保添加 `deUI` 分类到根 `` 键. ```ts // bundle import styles from "@delement/ui/styles" with { type: "css" }; // or directly for components import buttonStyles from "@delement/ui/styles/components/btn" with { type: "css" }; ``` * * * ## 捐款 使用节点.js QQ24和 `npm.cmd` {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}在PowerShell {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}在PowerShell. `npm.cmd run lint` 检查而不重写文件; 使用 `npm.cmd run lint::fix` 页:1 明确格式化的通行证。 运行相关 `typecheck::*` 和测试,然后 `npm.cmd run build::package` 财务报告和审定财务报表 `npm.cmd run check::package` 用于软件包输出 变化。 该建筑不重复林特/测试. 故事书是独立的, 明确要求检查。 出版的npm软件包不包括故事书来源, 站点输出、依赖和命令. * * * ## 文档 参见更多实例和API at [我们的网站](https://ui.d-element.ru/)。 。 。 . ## 常见问题 ### @delement/ui 是什么？ TypeScript React UI 组件库,有插件,公用设施,无害环境管理模块,以及SSR友好架构\. ### 如何安装 @delement/ui？ 在项目目录运行 npm install @delement/ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：msw（^2\.15\.0）、yup（^1\.7\.1）、react（^19\.3\.1）、i18next（^26\.5\.11）、date-fns（^4\.4\.0）、react-dom（^19\.3\.1）、ssr-window（^5\.0\.1）、react-imask（^7\.6\.1）、react-select（^5\.10\.2）、@fancyapps/ui（^6\.1\.14）、react-i18next（^17\.1\.9）、@web3r/flowerkit（^1\.2\.1）、react-datepicker（^9\.1\.0）、react-content-loader（^7\.1\.2）、@pbe/react-yandex-maps（^1\.2\.5）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @delement/ui 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @delement/ui 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @delement/ui 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=24。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @delement/ui 可以商用吗？ @delement/ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @delement/ui 的下载量有多少？ 根据 npm 官方下载统计，@delement/ui 在 2026/10/12 – 2026/11/10 这 30 天内被下载 2,009 次，日均约 67 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @delement/ui 还在维护吗？ 最新版本 0\.9\.9-156 发布于 2026/10/27（18 天前）；至今共发布 168 个版本，其中过去 12 个月发布了 32 个；首次发布于 2024/02/29。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。