# @3dsource/source-ui-native 中文文档 规范地址：https://npmcn.com/package/%403dsource/source-ui-native/ 版本：3\.11\.1 npm 元数据更新时间：2026-10-15T16:22:25.962Z 中文译文更新时间：2026-11-06T23:36:58.137Z 软件包许可：UNLICENSED 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%403dsource/source-ui-native 原文对照：https://npmcn.com/package/%403dsource/source-ui-native/?lang=original 项目主页：https://bitbucket.org/dreamsoft/front-libraries#readme 源码仓库：https://bitbucket.org/dreamsoft/front-libraries ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1.3 MB，117 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - Node.js 要求：\>=20 - 运行依赖：1 个 - 首次发布：2025-04-29T12:06:04.044Z - 最新版本发布：2026-10-15T16:22:25.749Z - 近 30 天下载量：2163（2026-10-05 至 2026-11-03，npm 官方下载统计） - 已发布版本数：65（近 12 个月 36 个） ## 中文简介 用于 3dsource 应用程序的角组件、 SCSS 样式和设计符号 ## 安装 ```sh npm install @3dsource/source-ui-native ``` 也可以使用：`pnpm add @3dsource/source-ui-native`、`yarn add @3dsource/source-ui-native`、`bun add @3dsource/source-ui-native` ## README # @ 3dsource/ source- ui- intative 3D Source应用的设计系统基础:独立的Angular组件外加自成一体的SCSS风格套件,与任何框架相配合. ## 概览 图书馆有两样东西: 1. **角构件** - 独立,基于信号, `OnPush` 准备投放任何角项目. 2. **SCSS 样式和设计符号** -- 可以被导入 React, Vue, plain HTML 或其他堆栈. 您自己写或复制标记( 演示应用中可用的片段), 而样式会照顾其余部分 . ## 安装 所需经费: - 用于寄存器工具的节点.js 20 或更新 - 角质 `>=19.0.0 <23.0.0` 当使用角构件时 - RxJS 软件 `>=7.8.0 <8.0.0` ```shell npm install @3dsource/source-ui-native ``` 角和RxJS不声明为包依赖. 使用 angular 组件必须提供兼容的 Angular 和 RxJS 版本。 这个 SCSS风格套件无需Angular即可被消耗. ## 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@`。 。 。 . ## 使用量 ### 导入样式 在您主样式文件中添加以下导入 : ```scss @use '../node_modules/@3dsource/source-ui-native/styles/source.ui.native.scss'; ``` 在范围中包装应用程序(或使用设计系统的区域) 符号和打字所用的类: ```html ``` ### 使用组件 导入想要的组件并添加到您的组件中 `imports`数字 : ```typescript import { ChangeDetectionStrategy, Component } from '@angular/core'; import { SourceButtonComponent } from '@3dsource/source-ui-native'; @Component({ selector: 'app-example', imports: [SourceButtonComponent], template: `Click Me`, changeDetection: ChangeDetectionStrategy.OnPush, }) export class ExampleComponent {} ``` ## 可用组件 ### UI 元素 - **[丝带](https://preview.3dsource.com/front-libraries/develop/#/components/SourceBadgeComponent)** - 显示徽章和标签 - **[半导体](https://preview.3dsource.com/front-libraries/develop/#/components/SourceBannerComponent)** - 显示通知横幅 - **[src-按钮](https://preview.3dsource.com/front-libraries/develop/#/components/SourceButtonComponent)** - 自定义按钮组件 - **[弧形复制右边](https://preview.3dsource.com/front-libraries/develop/#/components/SourceCopyrightComponent)** - 显示版权信息 - **[斜向潜水器](https://preview.3dsource.com/front-libraries/develop/#/components/SourceDividerComponent)** - 列表的横向分隔符 - **[闪光闪烁](https://preview.3dsource.com/front-libraries/develop/#/components/SourceHintComponent)** - 显示提示或错误消息 - **[src-icon-按钮](https://preview.3dsource.com/front-libraries/develop/#/components/SourceIconButtonComponent)** - 显示图标按钮 - **[斜弧装入](https://preview.3dsource.com/front-libraries/develop/#/components/SourceLoadingComponent)** - 装入指标 - **[src-logo 装入](https://preview.3dsource.com/front-libraries/develop/#/components/SourceLoadingComponent)** - 装入标志 - **[rc-模式本地化](https://preview.3dsource.com/front-libraries/develop/#/components/SourceModalElement)** - 模块组件和简单模式服务 - **[斜体滑动器](https://preview.3dsource.com/front-libraries/develop/#/components/SourceSliderComponent)** - 简单的滑动器组件 - **[弧平面](https://preview.3dsource.com/front-libraries/develop/#/components/SourceTileComponent)** - 预览、预设和选项选择器的图像缩略图平板 - **[弧形工具栏](https://preview.3dsource.com/front-libraries/develop/#/components/SourceToolbarElement)** - 用于组合按钮的 CSS 内置容器 - 列表、 窗体元素、 覆盖的基本样式 打开原生模式 `SourceModalNativeService`导入 `SourceOverlayContainerComponent` 和地点 `` 内部 页:1 `.section_3dsourcecom` 范围. ## 构成部分实例 ### 按钮组件 ```html Click Me ``` ### 徽章组件 ```html Info ``` ### 正在装入组件 ```typescript import { SourceLoadingComponent } from '@3dsource/source-ui-native'; ``` ```html ``` ## 自定义 组件可以通过压倒性的全球CSS变量或为特定组件变量设定值来定制. CSS 自定义属性全表载于 **[文档网站](https://preview.3dsource.com/front-libraries/develop/#/components/design-tokens)** ```css :root { --src-color-primary-500: #3f51b5; --src-text-body-main: #fff; } ``` ```css .src-button { --srcButtonBgColor: #3f51b5; --srcButtonBorderRadius: 6px; --srcButtonFontColor: #fff; --srcButtonPaddings: 8px 16px; } ``` 您可以在 **[文档](https://preview.3dsource.com/front-libraries/develop/#/components/getting-started)** ## 浏览器支持 演示这些组件时使用根浏览器列表目标 `baseline widely available on 2026-05-07`。软件包不声明 单独的浏览器矩阵; 耗用应用程序的 Angular/ 构建 配置控制其最终浏览器目标. ## 仓库开发 从寄存器根运行命令 : ```shell pnpm source-ui-native:build pnpm source-ui-native:compile-styles pnpm source-ui-native:release:patch ``` `build` 运行ng-packagr,并生产扩展和精密的CSS捆绑. 发布命令执行校验,更改软件包版本和 将校正的柏油球发布到 npm . ## 常见问题 ### @3dsource/source-ui-native 是什么？ 用于 3dsource 应用程序的角组件、 SCSS 样式和设计符号 ### 如何安装 @3dsource/source-ui-native？ 在项目目录运行 npm install @3dsource/source-ui-native，或使用 pnpm add / yarn add / bun add。 ### @3dsource/source-ui-native 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @3dsource/source-ui-native 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @3dsource/source-ui-native 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @3dsource/source-ui-native 可以商用吗？ @3dsource/source-ui-native 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。 ### @3dsource/source-ui-native 的下载量有多少？ 根据 npm 官方下载统计，@3dsource/source-ui-native 在 2026/10/05 – 2026/11/03 这 30 天内被下载 2,163 次，日均约 72 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @3dsource/source-ui-native 还在维护吗？ 最新版本 3\.11\.1 发布于 2026/10/16（23 天前）；至今共发布 65 个版本，其中过去 12 个月发布了 36 个；首次发布于 2025/04/29。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。