@ 3dsource/ source- ui- intative
3D Source应用的设计系统基础:独立的Angular组件外加自成一体的SCSS风格套件,与任何框架相配合.
概览
图书馆有两样东西:
- 角构件 - 独立,基于信号,
OnPush准备投放任何角项目. - SCSS 样式和设计符号 -- 可以被导入 React, Vue, plain HTML 或其他堆栈. 您自己写或复制标记( 演示应用中可用的片段), 而样式会照顾其余部分 .
安装
所需经费:
- 用于寄存器工具的节点.js 20 或更新
- 角质
>=19.0.0 <23.0.0当使用角构件时 - RxJS 软件
>=7.8.0 <8.0.0
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。 。 。 .
## 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/docs/llms-full.txt (中文(简体) )
链接显示最新版本,在新版本发布后长达7天的时间里,它们仍然可以显示前一期版本. 对于特定版本的文档,请添加到包名中,例如 @3dsource/source-ui-native@<version>。 。 。 .
使用量
导入样式
在您主样式文件中添加以下导入 :
@use '../node_modules/@3dsource/source-ui-native/styles/source.ui.native.scss';
在范围中包装应用程序(或使用设计系统的区域) 符号和打字所用的类:
<body class="section_3dsourcecom">
<app-root></app-root>
</body>
使用组件
导入想要的组件并添加到您的组件中 imports数字 :
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { SourceButtonComponent } from '@3dsource/source-ui-native';
@Component({
selector: 'app-example',
imports: [SourceButtonComponent],
template: `<src-button weight="primary" size="md">Click Me</src-button>`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ExampleComponent {}
可用组件
UI 元素
- 丝带 - 显示徽章和标签
- 半导体 - 显示通知横幅
- src-按钮 - 自定义按钮组件
- 弧形复制右边 - 显示版权信息
- 斜向潜水器 - 列表的横向分隔符
- 闪光闪烁 - 显示提示或错误消息
- src-icon-按钮 - 显示图标按钮
- 斜弧装入 - 装入指标
- src-logo 装入 - 装入标志
- rc-模式本地化 - 模块组件和简单模式服务
- 斜体滑动器 - 简单的滑动器组件
- 弧平面 - 预览、预设和选项选择器的图像缩略图平板
- 弧形工具栏 - 用于组合按钮的 CSS 内置容器
- 列表、 窗体元素、 覆盖的基本样式
打开原生模式 SourceModalNativeService导入
SourceOverlayContainerComponent 和地点 <src-overlay-container /> 内部
页:1 .section_3dsourcecom 范围.
构成部分实例
按钮组件
<src-button weight="primary" size="md">Click Me</src-button>
徽章组件
<src-badge context="info">Info</src-badge>
正在装入组件
import { SourceLoadingComponent } from '@3dsource/source-ui-native';
<src-loading [size]="64" backgroundStrokeColor="#e0f8ee" progressStrokeColor="#007a5c" />
自定义
组件可以通过压倒性的全球CSS变量或为特定组件变量设定值来定制. CSS 自定义属性全表载于 文档网站
:root {
--src-color-primary-500: #3f51b5;
--src-text-body-main: #fff;
}
.src-button {
--srcButtonBgColor: #3f51b5;
--srcButtonBorderRadius: 6px;
--srcButtonFontColor: #fff;
--srcButtonPaddings: 8px 16px;
}
您可以在 文档
浏览器支持
演示这些组件时使用根浏览器列表目标
baseline widely available on 2026-05-07。软件包不声明
单独的浏览器矩阵; 耗用应用程序的 Angular/ 构建
配置控制其最终浏览器目标.
仓库开发
从寄存器根运行命令 :
pnpm source-ui-native:build
pnpm source-ui-native:compile-styles
pnpm source-ui-native:release:patch
build 运行ng-packagr,并生产扩展和精密的CSS捆绑.
发布命令执行校验,更改软件包版本和
将校正的柏油球发布到 npm .