# @3dsource/source-ui 中文文档 规范地址：https://npmcn.com/package/%403dsource/source-ui/ 版本：3\.8\.1 npm 元数据更新时间：2026-10-15T16:03:05.207Z 中文译文更新时间：2026-11-06T23:15:05.312Z 软件包许可：UNLICENSED 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%403dsource/source-ui 原文对照：https://npmcn.com/package/%403dsource/source-ui/?lang=original 项目主页：https://bitbucket.org/dreamsoft/front-libraries#readme 源码仓库：https://bitbucket.org/dreamsoft/front-libraries ## 关键信息（来自 npm 元数据） - 包体积（解压后）：512 kB，38 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - Node.js 要求：\>=20 - 运行依赖：1 个 - peer 依赖：rxjs \>=7\.8\.0 \<8\.0\.0，@angular/cdk \>=19\.0\.0 \<23\.0\.0，@angular/core \>=19\.0\.0 \<23\.0\.0，@angular/forms \>=19\.0\.0 \<23\.0\.0，@angular/common \>=19\.0\.0 \<23\.0\.0，@angular/material \>=19\.0\.0 \<23\.0\.0，@angular/platform-browser \>=19\.0\.0 \<23\.0\.0，@3dsource/source-ui-native \>=2\.0\.0 - 首次发布：2025-05-13T13:01:01.652Z - 最新版本发布：2026-10-15T16:03:04.499Z - 近 30 天下载量：2186（2026-10-05 至 2026-11-03，npm 官方下载统计） - 已发布版本数：65（近 12 个月 33 个） ## 中文简介 用于 三维可视化应用的角 UI 组件 ## 安装 ```sh npm install @3dsource/source-ui ``` 也可以使用：`pnpm add @3dsource/source-ui`、`yarn add @3dsource/source-ui`、`bun add @3dsource/source-ui` ## README # @ 3dsource/ source- ui (英语) 一个专门为3D可视化应用设计的Angular UI组件的综合库. 这个图书馆 扩展有3D内容互动专用组件的角材料. ## 概览 Source UI库提供优化为3D应用的Angular组件,提供: - 3D 场景操纵的专用 UI 控制 - 与角材料设计系统整合 - 反应和无障碍组件 - 3D 源代码应用程序的一致样式 ## 安装 ### 先决条件 - 用于寄存器工具的节点.js 20 或更新 - 角、角CDK和角材料 `>=19.0.0 <23.0.0` - RxJS 软件 `>=7.8.0 <8.0.0` - **@ 3dsource/ source- ui- intative** -- 所需的对等依赖; 提供Source UI组件所依赖的基础设计符号和样式 ### 同伴依赖关系 此库需要以下对等依赖 : ```json { "@3dsource/source-ui-native": ">=2.0.0", "@angular/cdk": ">=19.0.0 <23.0.0", "@angular/common": ">=19.0.0 <23.0.0", "@angular/core": ">=19.0.0 <23.0.0", "@angular/forms": ">=19.0.0 <23.0.0", "@angular/material": ">=19.0.0 <23.0.0", "@angular/platform-browser": ">=19.0.0 <23.0.0", "rxjs": ">=7.8.0 <8.0.0" } ``` 刷子不声明为包依赖. 使用刷子的应用程序 标签模式必须自己提供. ### 图书馆安装 ```shell npm install @3dsource/source-ui @3dsource/source-ui-native ``` ## AI 编码代理 包船编码剂文件(`llms.txt`, (中文(简体) ), `guides/`, (中文(简体) ), `docs/`)与已安装的版本相匹配。 在你的计划里做代理 读取,将下面的块添加到 `AGENTS.md` 在项目根中。 如果项目 有一个 `CLAUDE.md`,同时添加行 `@AGENTS.md` claude Code写道: `AGENTS.md` 只有在没有的情况下 `CLAUDE.md`。 。 。 . ```md ## 3D Source UI libraries This project uses `@3dsource/source-ui-native` and, when needed, `@3dsource/source-ui`. Their docs ship inside the packages and match the installed version. Before you write or change UI code that uses them, read the `llms.txt` of each installed package and follow its links (setup, rules, the API of each component you use): - `node_modules/@3dsource/source-ui-native/llms.txt` - `node_modules/@3dsource/source-ui/llms.txt` Search tools usually skip `node_modules`, so open these files by path. The paths start from the folder of the `package.json` that lists `@3dsource/*`. In a monorepo this can be an app folder, not the repository root. Do not guess component names, inputs or CSS classes. Use only what these files list. Which package to install: - By default, only `@3dsource/source-ui-native`. - Add `@3dsource/source-ui` (always together with `@3dsource/source-ui-native`) only for: breadcrumbs, color picker, popover, slider group, tab line, tooltip, the CDK modal, styled Angular Material form fields, ngx-toastr toasts. - `@3dsource/source-ui` needs Angular. In a project without Angular, use only the styles of `@3dsource/source-ui-native`. Its `llms.txt` explains how. ``` 如果代理无法读取您项目的文件( 例如, 在浏览器中进行 AI 聊天), 请在 jsDelivr 上给出文件的公开副本 。 每个链接都是一个文件,包含包的所有向导和API. 对于 `@3dsource/source-ui`,给出这两个链接,因为它只与 `@3dsource/source-ui-native`。 。 。 . - [https://cdn.jsdelivr.net/npm/@3dsource/source-ui-native/docs/llms-full.txt (中文(简体) )](https://cdn.jsdelivr.net/npm/@3dsource/source-ui-native/docs/llms-full.txt) - [https://cdn.jsdelivr.net/npm/@3dsource/source-ui/docs/llms-full.txt (中文(简体) )](https://cdn.jsdelivr.net/npm/@3dsource/source-ui/docs/llms-full.txt) 链接显示最新版本,在新版本发布后长达7天的时间里,它们仍然可以显示前一期版本. 对于特定版本的文档,请添加到包名中,例如 `@3dsource/source-ui-native@`。 。 。 . ## 使用量 ### 样式导入 导入应用程序全局中的两种样式入口 `styles.scss`数字 : ```scss // Source UI Native @use '../node_modules/@3dsource/source-ui-native/styles/source.ui.native.scss' as source-ui-native; // Source UI @use '../node_modules/@3dsource/source-ui/styles/source.ui.scss' as source-ui; ``` 环绕全球应用(或使用设计系统的区域) 符号和打字所用的范围类: ```html ``` ### 材料设置 对于正确的形式样式,请在申请中提供大纲外观 配置 : ```typescript import { ApplicationConfig } from '@angular/core'; import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field'; export const appConfig: ApplicationConfig = { providers: [ { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' }, }, ], }; ``` ### 导入 导入想要的组件,并在组件文档描述的模板中使用. ```typescript import { ChangeDetectionStrategy, Component, signal } from '@angular/core'; import { SourceSliderGroupComponent } from '@3dsource/source-ui'; @Component({ selector: 'app-example', imports: [SourceSliderGroupComponent], template: ` `, changeDetection: ChangeDetectionStrategy.OnPush, }) export class ExampleComponent { value = signal(15); onValueChange(value: number) { this.value.set(value); } } ``` ## 可用组件和实例 - **[弧-面包屑](https://preview.3dsource.com/front-libraries/develop/#/components/SourceBreadcrumbsComponent)** - 说吧 模板驱动面包屑导航及溢出处理 - **[色相选择器](https://preview.3dsource.com/front-libraries/develop/#/components/SourceColorPickerComponent)** - 高调 可自定义的取色器 - **[曲线模式](https://preview.3dsource.com/front-libraries/develop/#/components/SourceModalComponent)** - 服务模式 组件 - **[半径](https://preview.3dsource.com/front-libraries/develop/#/components/SourcePopoverComponent)** - 过瘾 带有触发器或服务 - **[src- sliver- 组](https://preview.3dsource.com/front-libraries/develop/#/components/SourceSliderGroupComponent)** - 说吧 滑动器的高级变体 - **[弧-塔布线](https://preview.3dsource.com/front-libraries/develop/#/components/SourceTabsComponent)** - 压缩标签行控制 - **[缩写](https://preview.3dsource.com/front-libraries/develop/#/components/SourceTabsComponent)** - 两分一分 使用选项 - **[弧形工具提示](https://preview.3dsource.com/front-libraries/develop/#/components/SourceTooltipComponent)** - 指令 用于自定义工具提示 ## 自定义 定制方式与SourceUI Indigenous相同。 CSS 自定义属性全表可见于 页:1 **[文档网站](https://preview.3dsource.com/front-libraries/develop/#/components/design-tokens)**。 。 。 . 您可以看到所有可用的选项和示例 内 **[文档](https://preview.3dsource.com/front-libraries/develop/#/components/getting-started)** ## 仓库开发 从寄存器根运行命令 : ```shell pnpm source-ui:build pnpm source-ui:release:patch ``` 发布命令执行校验,更改软件包版本和 将校正的柏油球发布到 npm . ## 常见问题 ### @3dsource/source-ui 是什么？ 用于 三维可视化应用的角 UI 组件 ### 如何安装 @3dsource/source-ui？ 在项目目录运行 npm install @3dsource/source-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：rxjs（\>=7\.8\.0 \<8\.0\.0）、@angular/cdk（\>=19\.0\.0 \<23\.0\.0）、@angular/core（\>=19\.0\.0 \<23\.0\.0）、@angular/forms（\>=19\.0\.0 \<23\.0\.0）、@angular/common（\>=19\.0\.0 \<23\.0\.0）、@angular/material（\>=19\.0\.0 \<23\.0\.0）、@angular/platform-browser（\>=19\.0\.0 \<23\.0\.0）、@3dsource/source-ui-native（\>=2\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @3dsource/source-ui 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @3dsource/source-ui 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @3dsource/source-ui 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @3dsource/source-ui 可以商用吗？ @3dsource/source-ui 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。 ### @3dsource/source-ui 的下载量有多少？ 根据 npm 官方下载统计，@3dsource/source-ui 在 2026/10/05 – 2026/11/03 这 30 天内被下载 2,186 次，日均约 73 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @3dsource/source-ui 还在维护吗？ 最新版本 3\.8\.1 发布于 2026/10/16（23 天前）；至今共发布 65 个版本，其中过去 12 个月发布了 33 个；首次发布于 2025/05/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。