# @ds-gn/ui 中文文档 规范地址：https://npmcn.com/package/%40ds-gn/ui/ 版本：0\.14\.0 npm 元数据更新时间：2026-11-13T03:08:09.774Z 中文译文更新时间：2026-11-12T23:30:50.015Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40ds-gn/ui 原文对照：https://npmcn.com/package/%40ds-gn/ui/?lang=original 项目主页：https://ds-gn.com/?utm_source=npm&utm_medium=package_page&utm_campaign=ui 源码仓库：https://github.com/LightLeapLabs/ds-gn ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1.3 MB，351 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：5 个 - peer 依赖：lit ^3\.3\.1，react \>=18 - 首次发布：2026-10-09T20:43:08.651Z - 最新版本发布：2026-11-13T03:08:09.510Z - 近 30 天下载量：3053（2026-10-13 至 2026-11-11，npm 官方下载统计） - 已发布版本数：23（近 12 个月 23 个） ## 中文简介 DS-GN设计系统的UI组件 ## 安装 ```sh npm install @ds-gn/ui ``` 也可以使用：`pnpm add @ds-gn/ui`、`yarn add @ds-gn/ui`、`bun add @ds-gn/ui` ## README [![DS-GN](https://ds-gn.com/logo-readme.svg)](https://ds-gn.com/?utm_source=npm&utm_medium=readme&utm_campaign=ui&utm_content=hero_logo) # 翻译: DS-GN设计框架不可知网络组件和反应包 系统. **公开beta** • 妇女 [网站](https://ds-gn.com/?utm_source=npm&utm_medium=readme&utm_campaign=ui&utm_content=website_link) • 妇女 [文档](https://ds-gn.com/docs/) • 妇女 [构成部分参考](https://ds-gn.com/docs/components/button/) • 妇女 [更改日志](https://ds-gn.com/docs/changelog/ui/) • 妇女 [公共仓库](https://github.com/LightLeapLabs/design-system) npm的存储器链接指向 我们的私人建设存储器,这是需要的 页:1 举例和问题报告,请访问 [公共设计系统存放处](https://github.com/LightLeapLabs/design-system)。 。 。 . ## 安装 选择您的软件包管理器 : ```bash npm install @ds-gn/ui @ds-gn/tokens pnpm add @ds-gn/ui @ds-gn/tokens bun add @ds-gn/ui @ds-gn/tokens ``` 直接安装指针包是因为您的应用程序导入其 样式表。 两个软件包都来自公共 npm , 需要否 `.npmrc` 或者说 权利标志. ## 快开始 在应用程序样式表中导入设计符 : ```css @import '@ds-gn/tokens/public'; @import '@ds-gn/tokens/theme'; @import '@ds-gn/tokens/properties'; ``` 三者皆须入. `properties` 注册输入的自定义属性 组件的样式取决于 —— 阴影根无法注册 `@property` 本身,所以没有这个导入,这些样式会默默地放弃而不是 出错(变相停止应用,锚地板落地出错). 然后只导入您使用的组件 。 导入组件时登记其 自定义元素 : ```js import '@ds-gn/ui/button'; ``` ```html Get started ``` ### 反应 每个组件都会生成官方反应包. 反应是可选的 对等依赖,所以在应用程序中安装它. ```tsx import { Button } from '@ds-gn/ui/react'; export function Cta() { return ; } ``` 包装器保留其纯元件名称( :`Button`, (中文(简体) ), `Input`,等等). 如果与本地组件相冲突, 则不作为导入 : ```tsx import { Button as DsgnButton } from '@ds-gn/ui/react'; ``` 自定义事件被曝光为 `on` 以其基础命名的道具 `dsgn-*` 例如 `onDsgnInput` 财务报告和审定财务报表 `onDsgnImageError`。 。 。 . ## 软件包出口 | 导出 | 目的 | | --- | --- | | `@ds-gn/ui/` | 注册一个自定义元素,例如: `button` | | `@ds-gn/ui//props` | 组成部分财产定义和支持出口 | | `@ds-gn/ui/react` | 每个组件都打入了反应包 | | `@ds-gn/ui/logo` | 日志字符串助手 | | `@ds-gn/ui/logo/mark.svg` | DS- GN 标志 | | `@ds-gn/ui/logo/full.svg` | 光背景的完整的DS/GN标志 | | `@ds-gn/ui/logo/light.svg` | 光背景的完整的DS/GN标志 | | `@ds-gn/ui/logo/dark.svg` | 暗背景的完整DS/GN标志 | | `@ds-gn/ui/layout.css` | 页面布局的可选预升级样式 | | `@ds-gn/ui/hero/fallback.css` | 英雄的可选升级前样式 | | `@ds-gn/ui/playground-manifest` | 可读部件游乐场元数据 | 字符串助手继承 `currentColor` 写出主题感知的字母 并保持斜线橙色。 使用 `getLogoHtml({ size: 24 })` 使艺术作品在一定高度上具有无障碍名称. ## 服务器渲染 - **SSR 节点主机** (包括Next、Remix、Nuxt、SvelteKit、Astro和TanStack) 从节点开始 : 导入 `@ds-gn/ui/react` 服务器渲染时为 安全无虞. 服务器释放出一个惰性 `` 在客户端上升级的标签 . 声明的影子 DOM 不被放出,所以可以有一个简短的无风格的框架 升级前; 下面预升级样式表覆盖布局 组件。 反应属性为应用客户端; pass `id`, (中文(简体) ), `class`,与普通属性相类似. - **云旗工人d** (包括TanStack Start on Workers): 完整的SSSR不是 由于自定义元素无法在 工人运行时间。 只装入包装客户端, 如后面的 `ClientOnly` 带有懒惰导入的边框. ### 在组件注册前 当您的 HTML 在组件脚本运行前被渲染( 服务器渲染) 或静态页面),在页面 CSS 中导入可选的升级前样式表: ```css @import '@ds-gn/ui/layout.css'; @import '@ds-gn/ui/hero/fallback.css'; /* only if you use dsgn-hero */ ``` 它们只在每项要素登记之前适用. `layout.css` 集装箱, 导航 特性标签和页脚到最后的沟槽和区间间, 保留导航栏的高度, 并保持导航链接和下降的隐藏 直到它把他们弄出来. `hero/fallback.css` 对每个英雄都一样 设置。 没有它们,内容可以移动或闪出为未设置的文本,同时 脚本装入. **公共beta 组件和兼容政策** 公共beta包含32个自定义元素: | 组 | 包含的组成部分 | | --- | --- | | 辅助能力 | `Button` (单位:千美元)`dsgn-button`, (中文(简体) ), `DropdownMenu` (单位:千美元)`dsgn-dropdown-menu`, (中文(简体) ), `Field` (单位:千美元)`dsgn-field`, (中文(简体) ), `Input` (单位:千美元)`dsgn-input`, (中文(简体) ), `Modal` (单位:千美元)`dsgn-modal`, (中文(简体) ), `SegmentedControl` (单位:千美元)`dsgn-segmented-control`, (中文(简体) ), `Select` (单位:千美元)`dsgn-select`, (中文(简体) ), `Table` (单位:千美元)`dsgn-table`, (中文(简体) ), `Toaster` (单位:千美元)`dsgn-toaster`(中文(简体) ) | | 显示和布局 | `Background` (单位:千美元)`dsgn-background`, (中文(简体) ), `Badge` (单位:千美元)`dsgn-badge`, (中文(简体) ), `Card` (单位:千美元)`dsgn-card`, (中文(简体) ), `CodeBlock` (单位:千美元)`dsgn-code-block`, (中文(简体) ), `Container` (单位:千美元)`dsgn-container`, (中文(简体) ), `Divider` (单位:千美元)`dsgn-divider`, (中文(简体) ), `Grid` (单位:千美元)`dsgn-grid`, (中文(简体) ), `Stack` (单位:千美元)`dsgn-stack`(中文(简体) ) | | 内容 | `Heading` (单位:千美元)`dsgn-heading`, (中文(简体) ), `Text` (单位:千美元)`dsgn-text`, (中文(简体) ), `Icon` (单位:千美元)`dsgn-icon`, (中文(简体) ), `Image` (单位:千美元)`dsgn-image`, (中文(简体) ), `Callout` (单位:千美元)`dsgn-callout`, (中文(简体) ), `CodeSnippet` (单位:千美元)`dsgn-code-snippet`(中文(简体) ) | | 营销和组成 | `Hero` (单位:千美元)`dsgn-hero`, (中文(简体) ), `HeadingBlock` (单位:千美元)`dsgn-heading-block`, (中文(简体) ), `FeatureItem` (单位:千美元)`dsgn-feature-item`, (中文(简体) ), `FeatureTabs` (单位:千美元)`dsgn-feature-tabs`, (中文(简体) ), `FormBlock` (单位:千美元)`dsgn-form-block`(中文(简体) ) | | 导航 | `Nav` (单位:千美元)`dsgn-nav`, (中文(简体) ), `NavLink` (单位:千美元)`dsgn-nav-link`, (中文(简体) ), `NavDropdownColumn` (单位:千美元)`dsgn-nav-dropdown-column`, (中文(简体) ), `Footer` (单位:千美元)`dsgn-footer`(中文(简体) ) | 公共贝塔的摩达尔船. 目前没有导出自定义元素 除外。 极光网引擎是一个内部渲染辅助器,不是自定义 元素或软件包导出。 阿凡达和另一个 路线图上的应用级组件是发射后的工作. 包子还在 `0.x`数字 : - 所列组成部分得到消费者评价和生产支持 ,但是他们的API可能会在 `1.0`。 。 。 . - 补丁释放不会故意打破记录的API. 计划中断 使用迁移指导在少量释放物中改变船舶. - 至少有一个被贬损的API可以完全释放 并且至少90天,以时间更长者为准,然后搬走。 安全、合法或 打破平台的紧急情况可能需要更快的改变. - 兼容合同涵盖有文件记载的组件子路径、自定义 元素标记、属性和属性、槽、方法、事件、 CSS 部件 和自定义属性,并生成 React 包装。 无记录的内部 不是公开的 API. ## 支助 公众搜索或报告软件包问题 [问题跟踪器](https://github.com/lightleaplabs/design-system/issues)用于 问题、电子邮件 [支持@ds-gn.com](mailto:support@ds-gn.com)。 。 。 . ## 许可证 这个软件包根据包含在 `LICENSE`。 。 。 . 列入分发范围的第三方材料仍须遵守 所列许可证 `THIRD_PARTY_NOTICES`。 。 。 . ## 常见问题 ### @ds-gn/ui 是什么？ DS-GN设计系统的UI组件 ### 如何安装 @ds-gn/ui？ 在项目目录运行 npm install @ds-gn/ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：lit（^3\.3\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @ds-gn/ui 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @ds-gn/ui 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @ds-gn/ui 可以商用吗？ @ds-gn/ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @ds-gn/ui 的下载量有多少？ 根据 npm 官方下载统计，@ds-gn/ui 在 2026/10/13 – 2026/11/11 这 30 天内被下载 3,053 次，日均约 102 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @ds-gn/ui 还在维护吗？ 最新版本 0\.14\.0 发布于 2026/11/13（今天）；至今共发布 23 个版本，其中过去 12 个月发布了 23 个；首次发布于 2026/10/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。