TCLOUD-UI
In order to facilitate the development of TCloud features in Angular. The modules maintain the tcloud style for standard development.
Installation instructions
Install dev-tcloud/tcloud-ui from npm
npm install @dev-tcloud/tcloud-ui --save
Versões
| Angular | Versão |
|---|---|
| Angular 19 | 5.x.x |
| Angular 18 | 4.x.x |
| Angular 17 | 3.x.x |
| Angular 16 | 2.x.x |
| Angular 15 | 1.x.x |
| Angular 14 | 0.x.x |
tcloud-ui modules
- TCloudUiModalModule
- TCloudUiTabMenuModule
- TCloudUiLinhaLogoModule
- TCloudUiLineStepCircleModule
- TCloudUiMultiSelectModule
- TCloudUiDataListModule
- TCloudUiMultiInputModule
- TCloudUiChoiceIssuesModule
- TCloudUiInputSearchModule
- TCloudUiNotFoundModule
- TCloudUiTableModule
- TCloudUiNumberStepModule
- TCloudUiScrollBoxModule
- TCloudUiFiltersModule
- TCloudUiAccordionModule
- TCloudUiDatepickerComponent
- TCloudUiDatepickerTimeComponent
- TCloudUiMultiplesValuesModule
- TCloudUiInputPasswordModule
- TCloudUiWelcomeModule
- TCloudUiLoadingModule
- TCloudUiReorderItemsModule
- TCloudUiLabelTokenModule
- TCloudUiLineStepTitleModule
tcloud-ui directives
- TCloudUiTooltipDirective
- TCloudUiAlignDirective
- TCloudUiHoverParentDirective
- TCloudUiElCopyDirective
- TCloudCurrencyDirective
- TCloudNgCheckAccessDirective
- TCloudNgFeatureFlagsDirective
- TCloudCheckAccessDirective
- TCloudUiIpMaskDirective
- TCloudUiHighLightDirective
- TCloudUiDigitOnlyDirective
tcloud-ui services
- TCloudUiLoadingTransitionsService
- TCloudUiSearchInObjectService
- TCloudUiConfig
- TCloudUiCustomServices
- TCloudCheckAccessService
Example of use
Standalone (recommended)
main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideTCloudUi } from '@dev-tcloud/tcloud-ui';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, {
providers: [
provideTCloudUi()
]
});
NgModule
app.module.ts
import { TCloudUiModule } from '@dev-tcloud/tcloud-ui';
@NgModule({
imports: [
...
TCloudUiModule
]
})
Animations
All animations in this library are CSS-based (animate.enter/animate.leave
and CSS transitions). You do not need @angular/animations, provideAnimations(),
or BrowserAnimationsModule — there is nothing to configure.
Add TCloud-ui components style and tcloud style
Recommended: single import
tcloud-styles.scss aggregates all library stylesheets in the official load
order (components → tcloud → tcloud-revitalizacao → tcloud-ui). Register just
this one file:
angular.json
"styles": [
"node_modules/@dev-tcloud/tcloud-ui/scss/tcloud-styles.scss"
],
Or, from a consumer .scss file:
@import '@dev-tcloud/tcloud-ui/scss/tcloud-styles.scss';
Legacy: individual imports
The individual stylesheets below remain available and unchanged for projects
that already register them. There are four stylesheets to register, not two. Missing
tcloud-revitalizacao/tc-rev-styles.scss drops the --size-* scale and components
render unstyled.
angular.json
"styles": [
"node_modules/@dev-tcloud/tcloud-ui/scss/components/styles.scss",
"node_modules/@dev-tcloud/tcloud-ui/scss/tcloud/styles.scss",
"node_modules/@dev-tcloud/tcloud-ui/scss/tcloud-revitalizacao/tc-rev-styles.scss",
"node_modules/@dev-tcloud/tcloud-ui/scss/tcloud-ui/styles.scss"
],
components/styles.scss— component styles.tcloud/styles.scss— tcloud base styles.tcloud-revitalizacao/tc-rev-styles.scss— revitalization layer; defines the--size-*scale (e.g.--size-52: 3.25rem).tcloud-ui/styles.scss— modern design system (--c-*tokens, dark mode).
Verify in the browser console:
getComputedStyle(document.documentElement).getPropertyValue('--size-52') must
return 3.25rem. If it comes back empty, the tcloud-revitalizacao/tc-rev-styles.scss
sheet is missing.
Add calendar library to use datepicker
"script": [
"node_modules/@dev-tcloud/tcloud-ui/datepicker/js/datepicker-full.min.js",
],
TcloudUi
This project was generated with Angular CLI version 18.1.0.