diff --git a/src/ng/demo/src/webdoc/faq-en.md b/src/ng/demo/src/webdoc/faq-en.md index e69de29b..7f3429be 100644 --- a/src/ng/demo/src/webdoc/faq-en.md +++ b/src/ng/demo/src/webdoc/faq-en.md @@ -0,0 +1,81 @@ +--- +title: FAQ | TinyNG +--- + +# FAQ +## 1. How to fix the error "Can't bind to 'ngModel' since it isn't a known property of 'ti-xxxxx'"? + +To use `ngModel`, you need to import `FormsModule`. + +```typescript +import { FormsModule } from '@angular/forms'; +@NgModule({ + imports: [ + ... + FormsModule, + ... + ], +}) +``` + +## 2. How to fix the error "Can't bind to 'yyyyy' since it isn't a known property of 'ti-xxxxx'"? + +Import the corresponding module of the component. + +``` + If 'ti-xxxxx' is an Angular component and it has 'options' input, then verify that it is part of this module. + If 'ti-xxxxx' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. + To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. +``` + +## 3. How to find the module name of the `TinyNG` component? + +When looking at examples of specific components, the module on which the component depends will be displayed at the top of the page. + +## 4. How to fix the error "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked"? + +This is a prompt from the Angular debugging environment, indicating that Angular has finished rendering the templates, but the business code changes the template variables after `ngAfterViewInit()` or later. + +Two solutions: 1. Optimize code organization and change template variables in advance. 2. After changing the template variables, force the template to refresh (refer to this article). + +## 5. When using the `TinyNG` library for business development, how to debug it step by step? + +The TinyNG library has built-in source maps, which is very convenient for debugging step by step. The method of debugging step by step: + +At present, Angular CLI 7.0 version, `ng serve --vendor-source-map` (this parameter has been officially deprecated) + +Angular CLI 7.2 version, `ng serve --source-map=true` + +## 6. Why did I encounter an error when the code I wrote was exactly the same as that on the official website? + +Please use `Angular CLI` to create a new project, copy the code from the official website, and check if the component behaves the same as that on the official website. + +## 7. There is a scrollbar in part of the page, and the dropdown list inside it is misplaced when scrolling? + +The dropdown box component registers the `tiScroll` event on the document. When this event is detected, the component will make the dropdown box disappear. + +Developers need to trigger the `tiScroll` event on the document in the callback function of the corresponding scroll bar's scroll event to make the dropdown box disappear when dragging the local scrollbar. + +```typescript +const event: Event = document.createEvent('HTMLEvents'); +event.initEvent('tiScroll', false, true); +element.dispatchEvent(event); +``` + +## 8. How to fix the error "can't bind 'fromGroup'"? + +To use the reactive form directive, you need to import `ReactiveFormsModule`, see [Reactive Forms](https://angular.io/guide/reactive-forms) for details. + +```typescript +import { ReactiveFormsModule } from '@angular/forms'; +@NgModule({ +imports: [ +... +ReactiveFormsModule, +... +], +``` + +## 9. Why aren't the style settings on the tags in HTML string fragments passed to some component interfaces effective? + +In order to prevent XSS attacks, the component uses Angular's `DomSanitizer.sanitize` method for anti-XSS attack security processing, which will filter out the `style` setting, so it is recommended to use the `class` method to add styles. If you must use the `style` method and can ensure that the HTML string fragment passed in is safe, you can use the `bypassSecurityTrustHtml` method on the Angular-provided `DomSanitizer` to remove Angular's security filtering processing, which can be referenced from `message/message-security`. diff --git a/src/ng/demo/src/webdoc/getstart-en.md b/src/ng/demo/src/webdoc/getstart-en.md index e69de29b..47c7d26d 100644 --- a/src/ng/demo/src/webdoc/getstart-en.md +++ b/src/ng/demo/src/webdoc/getstart-en.md @@ -0,0 +1,89 @@ +--- +title: Getting Started | TinyNG +--- + +# Getting Started + +`TinyNG` is a web UI component library based on Angular + TypeScript. This article will introduce how to use `TinyNG` components in a project. + +> Before using the `TinyNG` component library, we recommend that you learn [HTML](https://www.w3schools.com/html/default.asp), [CSS](https://www.w3schools.com/css/default.asp), [TypeScript](https://www.typescriptlang.org/), and [Angular](https://angular.io/docs). + +## First Local Instance + +If you already have an Angular application project, please go directly to the [Installation](#installation) step. + +If not, we strongly recommend using the official `@angular/cli` tool to create a project. It has outstanding contributions in building, developing, debugging, packaging, and deploying projects, and provides great help for developers. + +#### Installing scaffolding tools + +> If you want to learn more about the functionality and commands of the CLI toolchain, it is recommended to visit [@angular/cli](https://angular.io/cli) to learn more. + +```bash +$ npm install -g @angular/cli +``` + +#### Creating a project + +> Before creating a project, please make sure that `@angular/cli` has been successfully installed. + +Create an Angular project named MYAPP in the current directory using `@angular/cli`, and automatically install the corresponding dependencies. + +```bash +ng new MYAPP +``` + +## Installation and Use + +#### Enter the project root directory and use npm to install `TinyNG`. + +```bash +cd MYAPP +npm install @opentiny/ng @angular/cdk +``` + +#### Import the module + +Before using a specific component, you need to import the corresponding module. Here, we will use the `Button` component as an example. + +```typescript +import { BrowserModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // some components depend on angular animations, so you may need to import the animations module +import { NgModule } from '@angular/core'; +import { TiButtonModule } from '@opentiny/ng'; // import the module of a specific component +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [AppComponent], + imports: [ + BrowserModule, + BrowserAnimationsModule, + TiButtonModule // import this module + ], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` + +#### Importing the Style File + +In the `angular.json` file, import the `TinyNG` component library style files. + +```json +{ + "build": { + "styles": [ + "node_modules/@opentiny/ng/themes/styles.css", // basic style + "node_modules/@opentiny/ng/themes/theme-default.css", // theme style + "src/styles.css" + ] + } +} +``` + +The `TinyNG` component library has built-in 5 sets of themes, which are theme-default.css, theme-blue.css, theme-green.css, theme-purple.css, and theme-red.css. You can choose according to your business scenario, or select more style configuration methods in [Theme Configuration](./themedoc). + +## Starting Development Debugging + +```bash +ng serve --open +``` diff --git a/src/ng/demo/src/webdoc/introduce-en.md b/src/ng/demo/src/webdoc/introduce-en.md index e69de29b..15e537db 100644 --- a/src/ng/demo/src/webdoc/introduce-en.md +++ b/src/ng/demo/src/webdoc/introduce-en.md @@ -0,0 +1,32 @@ +--- +title: Introduction | TinyNG +--- + +# Introduction + +`TinyNG` is a web UI component library based on Angular + TypeScript, which can be used for developing enterprise-level front-end pages. + +### Features + +- Interaction language and visual style suitable for enterprise-level PC products. + +- Over 70 high-quality Angular component libraries with out-of-the-box capabilities that almost cover all business scenarios. + +- Developed using TypeScript, providing complete type definitions. + +- Supports OnPush mode, showing remarkable performance. + +- Supports 5 international languages. + +- Provides ultra-granular theme customization capabilities through CSS variables. + +### Supported Environments + +| Edge
Edge | Firefox
Firefox | Chrome
Chrome | Safari
Safari | +| --------- | --------- | --------- | --------- | +| last 3 versions | last 3 versions | last 3 versions | last 2 versions | + +### Supported Angular Versions +Currently supports Angular `^14.0.0` version. + +### [Latest Version](./changelog) diff --git a/src/ng/demo/src/webdoc/introduce.md b/src/ng/demo/src/webdoc/introduce.md index 1c7a56b6..86527283 100644 --- a/src/ng/demo/src/webdoc/introduce.md +++ b/src/ng/demo/src/webdoc/introduce.md @@ -20,8 +20,6 @@ title: 介绍 | TinyNG - 通过CSS variables 提供超细粒度的主题定制能力。 - - ### 支持环境 | Edge
Edge | Firefox
Firefox | Chrome
Chrome | Safari
Safari | @@ -31,4 +29,4 @@ title: 介绍 | TinyNG ### 支持 Angular 版本 目前支持 Angular `^14.0.0`版本。 -### [最新版本](./changelog) \ No newline at end of file +### [最新版本](./changelog) diff --git a/src/ng/demo/src/webdoc/joinus-en.md b/src/ng/demo/src/webdoc/joinus-en.md index e69de29b..a67d19d1 100644 --- a/src/ng/demo/src/webdoc/joinus-en.md +++ b/src/ng/demo/src/webdoc/joinus-en.md @@ -0,0 +1,154 @@ +--- +title: Join us | TinyNG +--- +## Contribution Guide + +### Issue Specification + +- Issues are only used to submit Bugs or Features, as well as content related to user experience. Other content may be directly closed. + +- Before submitting an issue, please search for related content first to see if it has already been raised. + +- When providing the Bug, please specify clearly the version number of @opentiny/ng and related environment used. + +### Pull Request Specification + +- Please fork a copy to your own project and create a branch for changes. + + ```bash + git checkout -b my-branch master + ``` + +- Follow [commit rules](https://github.com/opentiny/ng/blob/main/commit.template) when writing commit message. + +- Prior to submitting a PR, please perform a rebase to ensure that the commit record is clean. + ```bash + git rebase master -i + git push -f + ``` + +- If you are fixing a `bug` or `issue`, please describe it clearly in the PR. + + +### Development + +```bash + +# fork && git clone +... +# my-branch +npm install +npm start + +``` + +## Unit Testing + +### Overall Testing +```bash +$ npm test ng-demo +``` +or +```bash +$ npx ng test ng-demo +``` + +### Specific Component Testing +```bash +$ npm test ${component name for test}-demo +``` +or +```bash +$ npx ng test ${component name for test}-demo +``` + +For example: +```bash +$ npm test text-demo +``` + +### Adding Test Cases + +- Because each component in the library has a separate version, developers need to prepare a unit test environment for newly added components. (An automated script can also be used to generate the required files for the new component, such as: `npm build:test radio`) +- For existing components, simply create a `${your component name}.spec.json` file in the component `demo/` directory and write test scripts. +- If the `${your component name}.spec.json` file already exists in the component demo directory, simply modify the case in this file. + +TinyNG uses the [Jasmine testing framework](https://jasmine.github.io/) to perform unit testing on the component library content. +The `npm test` command builds the application in **watch mode** and starts the [karma test runner](https://karma-runner.github.io/). +After the run is complete, the console outputs the test results in the following format: + +``` +✔ Browser application bundle generation complete. +28 11 2022 08:40:17.804:WARN [karma]: No captured browser, open http://localhost:9876/ +28 11 2022 08:40:17.824:INFO [karma-server]: Karma v6.3.20 server started at http://localhost:9876/ +28 11 2022 08:40:17.825:INFO [launcher]: Launching browsers Chrome with concurrency unlimited +28 11 2022 08:40:17.833:INFO [launcher]: Starting browser Chrome +28 11 2022 08:40:19.278:INFO [Chrome 107.0.0.0 (Windows 10)]: Connected on socket swhnqYi_RwdYbu8uAAAB with id 55443332 +Chrome 107.0.0.0 (Windows 10): Executed 5 of 5 SUCCESS (0.562 secs / 0.815 secs) +TOTAL: 5 SUCCESS +``` + +It also opens the Chrome browser and displays the test output in the [Jasmine HTML Reporter](https://github.com/dfederm/karma-jasmine-html-reporter). You can click on a specific test case to rerun it, or click on a description row to rerun the tests selected in that test suite. + +Unit testing cases and related configurations are located in the `/src/test/` directory. + +For more detailed information, consult the [Angular testing introduction](https://angular.cn/guide/testing). + +### Code Specification +Follow [ESLint](https://github.com/opentiny/ng/blob/main/.eslintrc.js) + +## Recruiting Talents +### Web Front-end Development Engineer + +#### Job Responsibilities + ++ The team currently uses Angular and Vue as front-end frameworks and uses ES6/7 to do specific development work; + ++ Front-end engineering, creating an end-to-end engineering system from project initialization, construction deployment, release to operation and maintenance, and creating front-end DevOps; + ++ Visual building technology, based on less or no code building methods, improves the development efficiency of activity operations; + ++ Targeting scenarios that focus on first-screen rendering and SEO, research and develop a Nodejs+Vue Isomorphic solution to achieve ultimate page performance for first screen rendering; + ++ For Nodejs, independently research and develop front-end engineering system-related tools, use Nodejs more efficiently to implement web layer development, and use Nodejs for server-side development in high-concurrency business scenarios; + ++ Based on Serverless solutions, solve Nodejs operation and maintenance issues and improve front-end development efficiency. + + +#### Skills required + ++ Proficient in various front-end technologies, including HTML, CSS, JavaScript, etc.; + ++ Have cross-terminal front-end development capabilities, proficient in at least one direction of Web (PC+Mobile), Nodejs, and Native App, and having multiple ones is better, and encourage exploration of the integration of Native and Web technologies; + ++ Have a certain understanding of front-end engineering and modular development, and have practical experience (such as Webpack, Babel, AMD, CMD, etc.); + ++ Possess excellent teamwork spirit, use own technical capabilities to improve the overall development efficiency of the team, and enhance team influence; + ++ Have sustained enthusiasm for front-end technology, with a cheerful personality, strong logical thinking, and smooth communication skills; + ++ Willing to share, good at summarizing and precipitating, and able to share good experiences within the team; + ++ Optional: be familiar with at least one non-front-end language (such as Java, PHP, C, C++, Python, Ruby), and have practical experience. + +### Java Backend Development Engineer + +#### Job Responsibilities + ++ Participate in the architecture design, detailed scheme design and development of core frameworks, and provide users with high-availability and high-performance console services; + ++ Responsible for solution design and development in the field of cloud-native, realizing high traffic and high concurrency of cloud service business; + ++ Responsible for the incubation, design, and development of public services and middleware, building industry-leading platform capabilities. + +#### Skills required + ++ Familiar with J2EE, Java Web programming technology, deeply apply and optimize various open-source frameworks such as Spring; + ++ Familiar with Netty, familiar with multi-threaded model programming and network IO model; + ++ Familiar with Spring Boot, Spring MVC, Redis, MySQL; + ++ Have strong learning ability and technical sensitivity, a strong sense of responsibility and enterprising spirit, and enjoy learning and sharing technology. + +If you are interested in joining, please add WeChat to consult: ly5353523. diff --git a/src/ng/demo/src/webdoc/language-en.md b/src/ng/demo/src/webdoc/language-en.md index e69de29b..a66ad34d 100644 --- a/src/ng/demo/src/webdoc/language-en.md +++ b/src/ng/demo/src/webdoc/language-en.md @@ -0,0 +1,210 @@ +--- +title: Internationalization | TinyNG +--- + +# Internationalization + +Currently, the default language is Chinese. If you need to use other languages, you can configure them during initialization or modify them at any time during runtime, following the solutions below. + +## Setting the Language + +`TinyNG` supports 5 languages, with Chinese set as the default. In Angular project application entry file `app.module.ts`, you can set the language. + +```typescript +import { TiLocale } from '@opentiny/ng'; +// Import other items + +@NgModule({ + imports: [ + // Import module... + ] + + // Configure other items... +}) +export class AppModule { + constructor() { + // Configure Tiny's internationalization resources, with Chinese set as the default. + /** + * Available language identifiers: + * TiLocale.EN_US English + * TiLocale.ZH_CN Simplified Chinese + * TiLocale.ES_US Latin American Spanish + * TiLocale.FR_FR French + * TiLocale.PT_BR Portuguese + */ + TiLocale.setLocale(TiLocale.EN_US); + } + ... +} +``` + +## Internationalization Conversion +#### Using Pipes for Internationalization Conversion +This method only supports switching languages by refreshing the page. Businesses may combine cookie switching to change languages. + +Template file `locale-basic.html` + +```html +

{{ 'testStr' | tiTranslate }}

+

{{ 'testStrArgs1' | tiTranslate: [1] }}

+

{{ 'testStrArgs2' | tiTranslate: [1,2] }}

+

{{ 'tiButton.ok' | tiTranslate }}

+ + +``` + +`locale-basic.component.ts` file +```typescript +import { Component } from '@angular/core'; +import { + en_US as tinyen_US, + zh_CN as tinyzh_CN, + TiLocale, + TiLocaleFormat, +} from '@opentiny/ng'; + +interface LocaleWords { + tiLocaleKey: string; + testStr: string; + testStrArgs1: string; + testStrArgs2: string; +} + +@Component({ + templateUrl: './locale-basic.html', +}) +export class LocaleBasicComponent { + // The business's own words and phrases + private static myzh_CN: any = { + tiLocaleKey: 'zh-CN', + testStr: 'Testing', + testStrArgs1: 'Single argument test scenario {0}', + testStrArgs2: 'Testing single multi-argument scenario {0} and {1}', + }; + // The business's own words and phrases + private static myen_US: LocaleWords = { + tiLocaleKey: 'en-US', + testStr: 'test str with args', + testStrArgs1: 'test str with args {0}', + testStrArgs2: 'test str with args {0} and {1}', + }; + + constructor() { + // Add the business's internationalized words and phrases + TiLocale.setWords({ + 'zh-CN': { ...tinyzh_CN, ...LocaleBasicComponent.myzh_CN }, + 'en-US': { ...tinyen_US, ...LocaleBasicComponent.myen_US }, + }); + TiLocale.setLocale(this.getCookie('localeKey')); + this.setValues(); + } + + changeLocale(localeKey: string): void { + TiLocale.setLocale(localeKey); + } + + // Open this code to use filters for internationalization conversion: + setLocaleAndRefresh(localeKey: string): void { + this.changeLocale(localeKey); + document.cookie = `localeKey=${localeKey}`; + location.reload(); + } + + getCookie(key: string): string { + const name: string = key + '='; + const splitedCookie: Array = document.cookie.split(';'); + for (let word of splitedCookie) { + while (word.charAt(0) === ' ') { + word = word.substring(1); + } + if (word.indexOf(name) === 0) { + return word.substring(name.length, word.length); + } + } + + return ''; + } +} +``` + +#### Using JavaScript methods for internationalization conversion +This method allows language switching without refreshing the page. + +Template file `locale-basic.html` + +```html +

{{testStr}}

+

{{testStrArgs1}}

+

{{testStrArgs2}}

+

{{okBtn}}

+ + +``` + +`locale-basic.component.ts` file + +```typescript +import { Component } from '@angular/core'; +import { + en_US as tinyen_US, + zh_CN as tinyzh_CN, + TiLocale, + TiLocaleFormat, +} from '@opentiny/ng'; + +interface LocaleWords { + tiLocaleKey: string; + testStr: string; + testStrArgs1: string; + testStrArgs2: string; +} + +@Component({ + templateUrl: './locale-basic.html', +}) +export class LocaleBasicComponent { + testStr: string; + testStrArgs1: string; + testStrArgs2: string; + okBtn: string; + // The business's own words and phrases + private static myzh_CN: any = { + tiLocaleKey: 'zh-CN', + testStr: 'Testing', + testStrArgs1: 'Single argument test scenario {0}', + testStrArgs2: 'Testing single multi-argument scenario {0} and {1}', + }; + // The business's own words and phrases + private static myen_US: LocaleWords = { + tiLocaleKey: 'en-US', + testStr: 'test str with args', + testStrArgs1: 'test str with args {0}', + testStrArgs2: 'test str with args {0} and {1}', + }; + + constructor() { + // Add the business's internationalized words and phrases + TiLocale.setWords({ + 'zh-CN': { ...tinyzh_CN, ...LocaleBasicComponent.myzh_CN }, + 'en-US': { ...tinyen_US, ...LocaleBasicComponent.myen_US }, + }); + this.setValues(); + } + + changeLocale(localeKey: string): void { + TiLocale.setLocale(localeKey); + this.setValues(); + } + + setValues(): void { + this.testStr = this.setLocaleValue('testStr'); + this.testStrArgs1 = this.setLocaleValue('testStrArgs1', [1]); + this.testStrArgs2 = this.setLocaleValue('testStrArgs2', [1, 2]); + this.okBtn = this.setLocaleValue('tiButton.ok'); + } + + setLocaleValue(key: string, params?: Array): string { + return TiLocale.translate(key, params); + } +} +``` diff --git a/src/ng/demo/src/webdoc/themedoc-en.md b/src/ng/demo/src/webdoc/themedoc-en.md index e69de29b..975a4086 100644 --- a/src/ng/demo/src/webdoc/themedoc-en.md +++ b/src/ng/demo/src/webdoc/themedoc-en.md @@ -0,0 +1,231 @@ +--- +title: Theme configuration | TinyNG +--- + +# Theme configuration + +TinyNG supports a certain degree of style customization to meet diverse visual needs in business and brands, including but not limited to main color, rounding, border, and partial component visual customization. + +theme + +## Use predefined themes + +### Default theme + +Modify the `styles` field of `angular.json`, fully import `"node_modules/@opentiny/ng/themes/styles.css"` and `"node_modules/@opentiny/ng/themes/theme-default.css"`. + +```json +{ + ... + "architect": { + "build": { + ... + "styles": [ + "node_modules/@opentiny/ng/themes/styles.css", + "node_modules/@opentiny/ng/themes/theme-default.css", + "src/styles.css", + ], + ... + } + } + ... +} +``` + +### Official themes + +In addition to the default theme, we also provide 4 official themes, welcome to try it out and provide us feedback. + +- theme-blue.css +- theme-green.css +- theme-purple.css +- theme-red.css + +Modify the `styles` field of `angular.json`, fully import `"node_modules/@opentiny/ng/themes/styles.css"` and `"node_modules/@opentiny/ng/themes/theme-xxx.css"`. + +```json +{ + ... + "architect": { + "build": { + ... + "styles": [ + "node_modules/@opentiny/ng/themes/styles.css", + "node_modules/@opentiny/ng/themes/theme-xxx.css", + "src/styles.css", + ], + ... + } + } + ... +} +``` + +## Custom theme + +If you need a custom theme, after importing the official theme file, customize the parameters that override the theme style variables according to actual needs. Add the `src/theme-my.css` file, modify the `styles` field of `angular.json`, and import `src/theme-my.css`. + +```json +{ + ... + "architect": { + "build": { + ... + "styles": [ + "node_modules/@cloud/tiny3/themes/styles.css", + "node_modules/@cloud/tiny3/themes/theme-default.css", + "src/theme-my.css", + "src/styles.css", + ], + ... + } + } + ... +} +``` + +For example, in the following sample, by modifying the value of `--ti-base-color-brand`, the base color of the predefined default theme is modified to `#999999`. + +```css +:root { + --ti-base-color-brand: #999999; + ... + --ti-common-font-size-base: 16px; + ... + --ti-tag-text-color: #888888; + --ti-tag-icon-color: var(--ti-base-color-icon-graybg-normal); + ... +} +``` + +For variables related to themes, please see [basic-var.css](https://github.com/opentiny/ng/blob/main/%40opentiny/ng/themes/basic/basic-var.css). + +In addition to manually modifying the variables involved in the theme, the theme can also be modified through the [theme configuration system](../../designtheme/home). + +## Dynamically switch themes + +### Step 1: Copy the `TinyNG` theme CSS file to `assets` + +Modify the `assets` field of `angular.json`, refer to the following modification. `input` and `output` mean that when packaging, `"node_modules/@opentiny/ng/themes/"` is copied to `"/assets/tiny3/themes/"`. + +```json +{ + ... + "architect": { + "build": { + ... + "assets": [ + "src/favicon.ico", + "src/assets", + { + "glob": "**/*", + "input": "node_modules/@opentiny/ng/themes/", + "output": "/assets/tiny3/themes/" + } + ], + ... + } + } + ... +} +``` + +### Step 2: Add basic styles `"node_modules/@opentiny/ng/themes/styles.css"` + +Modify the `styles` field of `angular.json`, import `"node_modules/@opentiny/ng/themes/styles.css"`. + +```json +{ + ... + "architect": { + "build": { + ... + "styles": [ + "node_modules/@opentiny/ng/themes/styles.css", + "src/styles.css", + ], + ... + } + } + ... +} +``` + +### Step 3: Load theme CSS files + +Modify the Angular project startup file `main.ts`, load the theme CSS file, and then start the `AppModule`. + +```typescript +import { enableProdMode } from '@angular/core'; +import { TiTheme } from '@opentiny/ng'; + +import { AppModule } from './app/AppModule'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +if (environment.production) { + const themename: string = 'default'; + // Load the theme CSS file. Only production environment supports online skin switching, + // so basic CSS configuration is in angular.json, and theme CSS is loaded in code and applied later. + // The CSS file will be loaded from assets/tiny3/themes/theme-${theme}.css and put it in head link + const link: HTMLLinkElement = TiTheme.loadCss( + `assets/tiny3/themes/theme-${themename}.css`, + 'tiny3theme' + ); + + // Native support for CSSVars + // In Chrome, the newly added CSS is too late to load, the CSS style takes effect late, + // components with width calculation issues such as overflow have problems, + // so wait until the CSS is loaded before starting the App + link.addEventListener( + 'load', + () => { + TiTheme.bootstrapModule(AppModule); + }, + false + ); + link.addEventListener( + 'error', + () => { + TiTheme.bootstrapModule(AppModule); + }, + false + ); +} else { + TiTheme.bootstrapModule(AppModule); +} +``` + +### Step 4: Call code to switch themes, see [theme](../components/theme) example for details + +```typescript +import { TiTheme } from '@opentiny/ng'; + +... +TiTheme.loadThemeCss('blue', 'tiny3theme'); +... +``` + + + +## Dynamically change component styles on the web page + +The JavaScript method of operating CSS variables is as follows: (Chrome, Firefox, and Safari support it natively) + +> The compatibility patch for IE does not currently support JavaScript manipulation of CSS variables, +> but this capability may be supported in later versions. + +```javascript +// Set variable +document.body.style.setProperty('--primary', '#7F583F'); + +// Read variable +document.body.style.getPropertyValue('--primary').trim(); +// '#7F583F' + +// Delete variable +document.body.style.removeProperty('--primary'); +```