From 4c28290df379414c080ae8c8381e48a44dc13d21 Mon Sep 17 00:00:00 2001 From: sumeyye Date: Fri, 11 Jul 2025 10:31:18 +0300 Subject: [PATCH] fix: remove some module declarations from ui-themes docs --- docs/en/ui-themes/lepton-x-lite/angular.md | 2 + ...a-new-variation-to-lepton-x-for-angular.md | 16 ++-- .../how-to-change-default-theme-option.md | 38 +++++---- .../lepton/customizing-lepton-theme.md | 81 ++++++++++--------- 4 files changed, 75 insertions(+), 62 deletions(-) diff --git a/docs/en/ui-themes/lepton-x-lite/angular.md b/docs/en/ui-themes/lepton-x-lite/angular.md index 62f2980952..f89ef539b2 100644 --- a/docs/en/ui-themes/lepton-x-lite/angular.md +++ b/docs/en/ui-themes/lepton-x-lite/angular.md @@ -39,6 +39,7 @@ import { provideSideMenuLayout } from "@abp/ng.theme.lepton-x/layouts"; export const appConfig: ApplicationConfig = { providers: [ + // ... provideSideMenuLayout(), provideThemeLeptonX( withThemeLeptonXOptions({ @@ -58,6 +59,7 @@ import { provideAccountLayout } from "@abp/ng.theme.lepton-x/account"; export const appConfig: ApplicationConfig = { providers: [ + // ... provideAccountLayout() ], }; diff --git a/docs/en/ui-themes/lepton-x/angular/how-to-add-a-new-variation-to-lepton-x-for-angular.md b/docs/en/ui-themes/lepton-x/angular/how-to-add-a-new-variation-to-lepton-x-for-angular.md index afea2fd228..dc858715d0 100644 --- a/docs/en/ui-themes/lepton-x/angular/how-to-add-a-new-variation-to-lepton-x-for-angular.md +++ b/docs/en/ui-themes/lepton-x/angular/how-to-add-a-new-variation-to-lepton-x-for-angular.md @@ -37,26 +37,20 @@ export const NEW_THEME_PROVIDER = [ In this code snippet, we create a new instance of the LpxTheme class called myNewThemeDefinition. We specify the bundles that make up the theme (e.g., "bootstrap-custom" and "custom-theme"), the style name for the theme, a label to display in the UI, and an icon (using Bootstrap icons in this example). ### Step 2: Registering the New Theme Provider -Now that we have defined the new theme appearance, we need to register it as a provider in our Angular project. Open the app.module.ts file (or the module where LeptonX is configured), and add the following code: +Now that we have defined the new theme appearance, we need to register it as a provider in our Angular project. Open the `app.config.ts` file (or the configuration where LeptonX is configured), and add the following code: ```js import { NEW_THEME_PROVIDER } from './new-theme.provider.ts'; -@NgModule({ - imports: [ - // ... - ], +export const appConfig: ApplicationConfig = { providers: [ // ... - NEW_THEME_PROVIDER, + NEW_THEME_PROVIDER ], - // ... -}) -export class AppModule { } - +}; ``` -By importing the `NEW_THEME_PROVIDER` from the file where we defined our theme, we can add it to the providers array of our Angular module. This makes the new theme appearance available throughout the application. +By importing the `NEW_THEME_PROVIDER` from the file where we defined our theme, we can add it to the providers array of our Angular application configuration. This makes the new theme appearance available throughout the application. ### Step 3: Adding the Styles Path to angular.json diff --git a/docs/en/ui-themes/lepton-x/angular/how-to-change-default-theme-option.md b/docs/en/ui-themes/lepton-x/angular/how-to-change-default-theme-option.md index 4b58c4b106..494d4c5115 100644 --- a/docs/en/ui-themes/lepton-x/angular/how-to-change-default-theme-option.md +++ b/docs/en/ui-themes/lepton-x/angular/how-to-change-default-theme-option.md @@ -1,26 +1,34 @@ # Configuring the Default Theme for LeptonX -The LeptonX theme offers multiple appearances to suit your application's visual style. You can easily configure the default theme for your application using the ThemeLeptonXModule provided by LeptonX. +The LeptonX theme offers multiple appearances to suit your application's visual style. You can easily configure the default theme for your application using the `provideThemeLeptonX` provided by LeptonX. ### Configuration Code -To set the default theme, you need to configure the ThemeLeptonXModule using the forRoot() function in your application's main module (often referred to as AppModule). Here's an example: +To set the default theme, you need to configure the `provideThemeLeptonX` using the `withThemeLeptonXOptions({...})` function in the main configuration of your application (often referred to as appConfig). Here's an example: + ```js -import { ThemeLeptonXModule } from 'leptonx'; // Import the LeptonX theme module +import { provideThemeLeptonX, withThemeLeptonXOptions } from '@volosoft/abp.ng.theme.lepton-x'; -@NgModule({ - // ... Other module configurations - imports: [ - // ... Other imported modules - ThemeLeptonXModule.forRoot({ - defaultTheme: 'light', // Set the default theme to 'light' - }), +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideThemeLeptonX( + withThemeLeptonXOptions({ + styleFactory: styles => { + return styles; + }, + themeOptions: { + localStorageKey: 'lpx-theme', + styleFactory: styles => { + return styles; + }, + }, + defaultTheme: 'light' + }) + ), ], - bootstrap: [AppComponent], -}) -export class AppModule {} +}; ``` - -In the example above, we've imported the ThemeLeptonXModule and configured it using the forRoot() function. By providing the defaultTheme parameter and setting its value to 'light', +In the example above, we've imported the `provideThemeLeptonX` and `withThemeLeptonXOptions`, then configured it using the option parameters. By providing the `defaultTheme` parameter and setting its value to 'light', If you delete the defaultTheme parameter in the configuration object, the LeptonX theme will use the default value of "System" as the default theme appearance. diff --git a/docs/en/ui-themes/lepton/customizing-lepton-theme.md b/docs/en/ui-themes/lepton/customizing-lepton-theme.md index fb88742c5b..d626fd2769 100644 --- a/docs/en/ui-themes/lepton/customizing-lepton-theme.md +++ b/docs/en/ui-themes/lepton/customizing-lepton-theme.md @@ -12,19 +12,28 @@ You may want to change certain aspects of your website’s appearance with a cu ## Adding Custom Style -There is a `customStyle` boolean configuration in `ThemeLeptonModule`'s `forRoot` method. If this configuration is true, the style selection box is not included in the theme settings form and `ThemeLeptonModule` does not load its own styles. In this case, a custom style file must be added to the styles array in `angular.json` or must be imported by `style.scss`. +There is a `customStyle` boolean configuration in `provideThemeLepton(withLeptonOptions({...}))` method. If this configuration is true, the style selection box is not included in the theme settings form and `theme-lepton` does not load its own styles. In this case, a custom style file must be added to the styles array in `angular.json` or must be imported by `style.scss`. > Only angular project styles can be changed in this way. If the authorization flow is authorization code flow, MVC pages (login, profile, etc) are not affected by this change. Custom style implementation can be done with the following steps -Set `customStyle` property to `true` where is `ThemeLeptonModule` imported with `forRoot` method. +Set `customStyle` property to `true` where `provideThemeLepton(withLeptonOptions({...}))` method is called. ```javascript -// app.module.ts -ThemeLeptonModule.forRoot({ - customStyle: true -}) +// app.config.ts +import { provideThemeLepton, withOptions as withLeptonOptions } from '@volo/abp.ng.theme.lepton'; + +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideThemeLepton( + withLeptonOptions({ + customStyle: true + }) + ) + ], +}; ``` Import your style file to `src/style.scss` @@ -68,7 +77,7 @@ Or add your style file to the `styles` arrays which in `angular.json` file ## Inserting Custom Content To Lepton Menu -Lepton menu can take custom content both before and after the menu items displayed. In order to achieve this, pass a component as content through the parameters of `ThemeLeptonModule.forRoot` when you import the module in your root module, i.e. `AppModule`. Let's take a look at some examples. +Lepton menu can take custom content both before and after the menu items displayed. In order to achieve this, pass a component as content through the parameters of `provideThemeLepton(withLeptonOptions({...}))` when you import the provider in your root app configuration, i.e. `appConfig`. Let's take a look at some examples. ### Placing Custom Content Before & After Menu Items @@ -76,7 +85,10 @@ Lepton menu can take custom content both before and after the menu items display First step is to create a component which will serve as the custom content. ```js +// ... @Component({ + // ... + imports: [AsyncPipe], template: ` Support Issues @@ -88,27 +100,23 @@ First step is to create a component which will serve as the custom content. export class SupportLinkComponent { issueCount$ = of(26); // dummy count, replace this with an actual service } - -@NgModule({ - declarations: [SupportLinkComponent], - imports: [CommonModule], -}) -export class SupportLinkModule {} ``` -Now, pass this component as `contentAfterRoutes` option to `ThemeLeptonModule`. +Now, pass this component as `contentAfterRoutes` option to `provideThemeLepton(withLeptonOptions({...}))`. ```js -@NgModule({ - imports: [ - // other imports are removed for sake of brevity - SupportLinkModule, - ThemeLeptonModule.forRoot({ - contentAfterRoutes: [SupportLinkComponent], - }) +import { provideThemeLepton, withOptions as withLeptonOptions } from '@volo/abp.ng.theme.lepton'; + +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideThemeLepton( + withLeptonOptions({ + contentAfterRoutes: [SupportLinkComponent], + }) + ) ], -}) -export class AppModule {} +}; ``` If you start the dev server, you must see the inserted content as follows: @@ -124,24 +132,25 @@ Placing the content before menu items is straightforward: Just replace `contentA ### Placing a Search Input Before Menu Items -The Lepton package has a search component designed to work with the routes in the menu. You can simply import the module and pass the component as `contentBeforeRoutes` option to `ThemeLeptonModule`. +The Lepton package has a search component designed to work with the routes in the menu. You can simply import the provider and pass the component as `contentBeforeRoutes` option to `provideThemeLepton(withLeptonOptions({...}))`. ```js -import { MenuSearchComponent, MenuSearchModule } from '@volo/abp.ng.theme.lepton/extensions'; - -@NgModule({ - imports: [ - // other imports are removed for sake of brevity - - MenuSearchModule.forRoot({ +import { provideThemeLepton, withOptions as withLeptonOptions } from '@volo/abp.ng.theme.lepton'; +import { MenuSearchComponent, provideMenuSearch } from '@volo/abp.ng.theme.lepton/extensions'; + +export const appConfig: ApplicationConfig = { + providers: [ + // ... + provideThemeLepton( + withLeptonOptions({ + contentBeforeRoutes: [MenuSearchComponent], + }) + ), + provideMenuSearch({ limit: 3 // search result limit (default: Infinity) - }), - ThemeLeptonModule.forRoot({ - contentBeforeRoutes: [MenuSearchComponent], }) ], -}) -export class AppModule {} +}; ``` Here is how the search input works: