@ 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组件所依赖的基础设计符号和样式
同伴依赖关系
此库需要以下对等依赖 :
{
"@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"
}
刷子不声明为包依赖. 使用刷子的应用程序 标签模式必须自己提供.
图书馆安装
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。 。 。 .
## 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>。 。 。 .
使用量
样式导入
导入应用程序全局中的两种样式入口 styles.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;
环绕全球应用(或使用设计系统的区域) 符号和打字所用的范围类:
<body class="section_3dsourcecom">
<app-root></app-root>
</body>
材料设置
对于正确的形式样式,请在申请中提供大纲外观 配置 :
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' },
},
],
};
导入
导入想要的组件,并在组件文档描述的模板中使用.
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { SourceSliderGroupComponent } from '@3dsource/source-ui';
@Component({
selector: 'app-example',
imports: [SourceSliderGroupComponent],
template: ` <src-slider-group label="Slider Group" [min]="0" [max]="100" [step]="1" units="" [showRange]="true" [value]="value()" (groupValueChange)="onValueChange($event)" /> `,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ExampleComponent {
value = signal(15);
onValueChange(value: number) {
this.value.set(value);
}
}
可用组件和实例
- 弧-面包屑 - 说吧 模板驱动面包屑导航及溢出处理
- 色相选择器 - 高调 可自定义的取色器
- 曲线模式 - 服务模式 组件
- 半径 - 过瘾 带有触发器或服务
- src- sliver- 组 - 说吧 滑动器的高级变体
- 弧-塔布线 - 压缩标签行控制
- 缩写 - 两分一分 使用选项
- 弧形工具提示 - 指令 用于自定义工具提示
自定义
定制方式与SourceUI Indigenous相同。 CSS 自定义属性全表可见于 页:1 文档网站。 。 。 .
您可以看到所有可用的选项和示例 内 文档
仓库开发
从寄存器根运行命令 :
pnpm source-ui:build
pnpm source-ui:release:patch
发布命令执行校验,更改软件包版本和 将校正的柏油球发布到 npm .