@3dsource/source-ui
v3.7.5
Published
Angular UI components for 3D visualization applications
Readme
@3dsource/source-ui
A comprehensive library of Angular UI components designed specifically for 3D visualization applications. This library extends Angular Material with specialized components for 3D content interaction.
Overview
The Source UI library provides Angular components that are optimized for 3D applications, offering:
- Specialized UI controls for 3D scene manipulation
- Integration with Angular Material design system
- Responsive and accessible components
- Consistent styling across 3D Source applications
Installation
Prerequisites
- Node.js 20 or newer for repository tooling
- Angular, Angular CDK and Angular Material
>=19.0.0 <23.0.0 - RxJS
>=7.8.0 <8.0.0 - @3dsource/source-ui-native -- required peer dependency; provides the base design tokens and styles that Source UI components rely on
Peer Dependencies
This library requires the following peer dependencies:
{
"@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"
}Swiper is not declared as a package dependency. Applications using the swiper mode of tabs must provide it themselves.
Library Installation
npm install @3dsource/source-ui @3dsource/source-ui-nativeUsage
Style imports
Import both style entrypoints in the application's global 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;Wrap the application (or the area that uses the design system) in the global scope class used by the tokens and typography:
<body class="section_3dsourcecom">
<app-root></app-root>
</body>Material settings
For correct form styling, provide the outline appearance in the application configuration:
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
Import desired component and use it in template as described in components documentation.
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);
}
}Available Components and Examples
- src-breadcrumbs - Template-driven breadcrumb navigation with overflow handling
- src-color-picker - Highly customizable colorpicker
- src-modal - Service modal component
- src-popover - Popover with trigger or Service
- src-slider-group - Advanced variant of slider
- src-tab-line - Compact tab-line control
- src-tabs - Tabs in two options of usage
- src-tooltip - Directive for custom tooltips
Customization
Customization provided in the same way as in SourceUI Native. Whole table of CSS custom properties is available in the documentation site.
You can see all available options and examples in documentation
Repository development
Run commands from the repository root:
pnpm source-ui:build
pnpm source-ui:release:patchThe release command performs verification, changes the package version and publishes the verified tarball to npm.