mirror of https://github.com/abpframework/abp.git
İsmail ÇAĞDAŞ
4 years ago
committed by
GitHub
GitHub
4 changed files with 291 additions and 0 deletions
@ -0,0 +1,82 @@ |
|||
# LeptonX Lite Angular UI |
|||
LeptonX Lite has implementation for the ABP Framework Angular Client. It's a simplified variation of the [LeptonX Theme](https://x.leptontheme.com/). |
|||
|
|||
> If you are looking for a professional, enterprise ready theme, you can check the [LeptonX Theme](https://x.leptontheme.com/), which is a part of [ABP Commercial](https://commercial.abp.io/). |
|||
|
|||
> See the [Theming document](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Theming) to learn about themes. |
|||
|
|||
## Installation |
|||
|
|||
To add `LeptonX-lite` into your project, |
|||
|
|||
* Install `@abp/ng.theme.lepton-x` |
|||
|
|||
`yarn add @abp/ng.theme.lepton-x@preview` |
|||
|
|||
* Install `bootstrap-icons` |
|||
|
|||
`yarn add bootstrap-icons` |
|||
|
|||
|
|||
* Then, we need to edit the styles array in `angular.json` to replace the existing style with the new one. |
|||
|
|||
Add the following style |
|||
|
|||
```json |
|||
"node_modules/bootstrap-icons/font/bootstrap-icons.css", |
|||
``` |
|||
|
|||
* Finally, remove `ThemeBasicModule` from `app.module.ts`, and import the related modules in `app.module.ts` |
|||
|
|||
```js |
|||
import { ThemeLeptonXModule } from '@abp/ng.theme.lepton-x'; |
|||
import { SideMenuLayoutModule } from '@abp/ng.theme.lepton-x/layouts'; |
|||
|
|||
@NgModule({ |
|||
imports: [ |
|||
// ... |
|||
|
|||
// do not forget to remove ThemeBasicModule |
|||
// ThemeBasicModule.forRoot(), |
|||
ThemeLeptonXModule.forRoot(), |
|||
SideMenuLayoutModule.forRoot(), |
|||
], |
|||
// ... |
|||
}) |
|||
export class AppModule {} |
|||
``` |
|||
|
|||
Note: If you employ [Resource Owner Password Flow](https://docs.abp.io/en/abp/latest/UI/Angular/Authorization#resource-owner-password-flow) for authorization, you should import the following module as well: |
|||
|
|||
```js |
|||
import { AccountLayoutModule } from '@abp/ng.theme.lepton-x/account'; |
|||
|
|||
@NgModule({ |
|||
// ... |
|||
imports: [ |
|||
// ... |
|||
AccountLayoutModule.forRoot(), |
|||
// ... |
|||
], |
|||
// ... |
|||
}) |
|||
export class AppModule {} |
|||
``` |
|||
|
|||
To change the logos and brand color of `LeptonX`, simply add the following CSS to the `styles.scss` |
|||
|
|||
```css |
|||
:root { |
|||
--lpx-logo: url('/assets/images/logo.png'); |
|||
--lpx-logo-icon: url('/assets/images/logo-icon.png'); |
|||
--lpx-brand: #edae53; |
|||
} |
|||
``` |
|||
|
|||
- `--lpx-logo` is used to place the logo in the menu. |
|||
- `--lpx-logo-icon` is a square icon used when the menu is collapsed. |
|||
- `--lpx-brand` is a color used throughout the application, especially on active elements. |
|||
|
|||
### Server Side |
|||
|
|||
In order to migrate to LeptonX on your server side projects (Host and/or IdentityServer projects), please follow the [Server Side Migration](mvc.md) document. |
|||
@ -0,0 +1,130 @@ |
|||
# LeptonX Lite Blazor UI |
|||
|
|||
````json |
|||
//[doc-params] |
|||
{ |
|||
"UI": ["Blazor", "BlazorServer"] |
|||
} |
|||
```` |
|||
|
|||
LeptonX Lite has implementation for the ABP Framework Blazor WebAssembly & Blazor Server. It's a simplified variation of the [LeptonX Theme](https://x.leptontheme.com/). |
|||
|
|||
> If you are looking for a professional, enterprise ready theme, you can check the [LeptonX Theme](https://x.leptontheme.com/), which is a part of [ABP Commercial](https://commercial.abp.io/). |
|||
|
|||
> See the [Theming document](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Theming) to learn about themes. |
|||
|
|||
## Installation |
|||
|
|||
{{if UI == "Blazor"}} |
|||
- Complete the [MVC Razor Pages Installation](mvc.md#installation) for the **HttpApi.Host** application first. _If the solution is tiered/micro-service, complete the MVC steps for all MVC applications such as **HttpApi.Host** and if identity server is separated, install to the **IdentityServer**_. |
|||
|
|||
- Add **Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXLiteTheme** package to your **Blazor WebAssembly** application. |
|||
```bash |
|||
dotnet add package Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXLiteTheme |
|||
``` |
|||
|
|||
- Remove the old theme from the **DependsOn** attribute in your module class and add the **AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeModule** type to the **DependsOn** attribute. |
|||
|
|||
```diff |
|||
[DependsOn( |
|||
- typeof(AbpAspNetCoreComponentsWebAssemblyBasicThemeModule), |
|||
+ typeof(AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeModule) |
|||
)] |
|||
``` |
|||
|
|||
- Change startup App component with the LeptonX one. |
|||
|
|||
```csharp |
|||
// Make sure the 'App' comes from 'Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite' namespace. |
|||
builder.RootComponents.Add<App>("#ApplicationContainer"); |
|||
``` |
|||
|
|||
- Run the `abp bundle` command in your **Blazor** application folder. |
|||
|
|||
{{end}} |
|||
|
|||
|
|||
{{if UI == "BlazorServer"}} |
|||
|
|||
- Complete the [MVC Razor Pages Installation](mvc.md#installation) first. _If the solution is tiered/micro-service, complete the MVC steps for all MVC applications such as **HttpApi.Host** and **IdentityServer**_. |
|||
|
|||
- Add **Volo.Abp.AspNetCore.Components.Server.LeptonXLiteTheme** package to your **Blazor server** application. |
|||
```bash |
|||
dotnet add package Volo.Abp.AspNetCore.Components.Server.LeptonXLiteTheme |
|||
``` |
|||
|
|||
- Remove old theme from the **DependsOn** attribute in your module class and add the **AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeModule** type to the **DependsOn** attribute. |
|||
|
|||
```diff |
|||
[DependsOn( |
|||
- typeof(AbpAspNetCoreComponentsServerBasicThemeModule), |
|||
+ typeof(AbpAspNetCoreComponentsServerLeptonXLiteThemeModule) |
|||
)] |
|||
``` |
|||
|
|||
- Update AbpBundlingOptions |
|||
```diff |
|||
options.StyleBundles.Configure( |
|||
- BlazorBasicThemeBundles.Styles.Global, |
|||
+ BlazorLeptonXLiteThemeBundles.Styles.Global, |
|||
bundle => |
|||
{ |
|||
bundle.AddFiles("/blazor-global-styles.css"); |
|||
//You can remove the following line if you don't use Blazor CSS isolation for components |
|||
bundle.AddFiles("/MyProjectName.Blazor.styles.css"); |
|||
}); |
|||
``` |
|||
|
|||
- Update `_Host.cshtml` file. _(located under **Pages** folder by default.)_ |
|||
|
|||
- Add following usings to Locate **App** and **BlazorLeptonXLiteThemeBundles** classes. |
|||
```csharp |
|||
@using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite |
|||
@using Volo.Abp.AspNetCore.Components.Server.LeptonXLiteTheme.Bundling |
|||
``` |
|||
- Then replace script & style bundles as following: |
|||
```diff |
|||
- <abp-style-bundle name="@BlazorBasicThemeBundles.Styles.Global" /> |
|||
+ <abp-style-bundle name="@BlazorLeptonXLiteThemeBundles.Styles.Global" /> |
|||
``` |
|||
|
|||
```diff |
|||
- <abp-script-bundle name="@BlazorBasicThemeBundles.Scripts.Global" /> |
|||
+ <abp-script-bundle name="@BlazorLeptonXLiteThemeBundles.Scripts.Global" /> |
|||
``` |
|||
|
|||
{{end}} |
|||
|
|||
|
|||
--- |
|||
|
|||
## Customization |
|||
|
|||
### Toolbars |
|||
LeptonX Lite includes separeted toolbars for desktop & mobile. You can manage toolbars independently. Toolbar names can be accessible in the **LeptonXLiteToolbars** class. |
|||
|
|||
- `LeptonXLiteToolbars.Main` |
|||
- `LeptonXLiteToolbars.MainMobile` |
|||
|
|||
```csharp |
|||
public async Task ConfigureToolbarAsync(IToolbarConfigurationContext context) |
|||
{ |
|||
if (context.Toolbar.Name == LeptonXLiteToolbars.Main) |
|||
{ |
|||
context.Toolbar.Items.Add(new ToolbarItem(typeof(MyDesktopComponent))); |
|||
} |
|||
|
|||
if (context.Toolbar.Name == LeptonXLiteToolbars.MainMobile) |
|||
{ |
|||
context.Toolbar.Items.Add(new ToolbarItem(typeof(MyMobileComponent))); |
|||
} |
|||
|
|||
return Task.CompletedTask; |
|||
} |
|||
``` |
|||
|
|||
{{if UI == "BlazorServer"}} |
|||
|
|||
> _You can visit the [Toolbars Documentation](https://docs.abp.io/en/abp/latest/UI/Blazor/Toolbars) for better understanding._ |
|||
|
|||
{{end}} |
|||
@ -0,0 +1,67 @@ |
|||
# LeptonX Lite MVC UI |
|||
LeptonX Lite has implementation for the ABP Framework Razor Pages. It's a simplified variation of the [LeptonX Theme](https://x.leptontheme.com/). |
|||
|
|||
> If you are looking for a professional, enterprise ready theme, you can check the [LeptonX Theme](https://x.leptontheme.com/), which is a part of [ABP Commercial](https://commercial.abp.io/). |
|||
|
|||
> See the [Theming document](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Theming) to learn about themes. |
|||
|
|||
## Installation |
|||
|
|||
- Add **Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite** package to your **Web** application. |
|||
|
|||
```bash |
|||
abp add-package Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite |
|||
``` |
|||
|
|||
- Make sure the old theme is removed and LeptonX is added in your Module class. |
|||
|
|||
```diff |
|||
[DependsOn( |
|||
- typeof(AbpAspNetCoreMvcUiBasicThemeModule), |
|||
+ typeof(AbpAspNetCoreMvcUiLeptonXLiteThemeModule) |
|||
)] |
|||
``` |
|||
|
|||
- Update AbpBundlingOptions |
|||
|
|||
```diff |
|||
Configure<AbpBundlingOptions>(options => |
|||
{ |
|||
options.StyleBundles.Configure( |
|||
- BasicThemeBundles.Styles.Global, |
|||
+ LeptonXLiteThemeBundles.Styles.Global |
|||
bundle => |
|||
{ |
|||
bundle.AddFiles("/global-styles.css"); |
|||
} |
|||
); |
|||
}); |
|||
``` |
|||
|
|||
--- |
|||
|
|||
## Customization |
|||
|
|||
### Toolbars |
|||
LeptonX Lite includes separeted toolbars for desktop & mobile. You can manage toolbars independently. Toolbar names can be accessible in the **LeptonXLiteToolbars** class. |
|||
|
|||
- `LeptonXLiteToolbars.Main` |
|||
- `LeptonXLiteToolbars.MainMobile` |
|||
|
|||
```csharp |
|||
public class MyProjectNameMainToolbarContributor : IToolbarContributor |
|||
{ |
|||
public async Task ConfigureToolbarAsync(IToolbarConfigurationContext context) |
|||
{ |
|||
if (context.Toolbar.Name == LeptonXLiteToolbars.Main) |
|||
{ |
|||
context.Toolbar.Items.Add(new ToolbarItem(typeof(MyDesktopComponent))); |
|||
} |
|||
|
|||
if (context.Toolbar.Name == LeptonXLiteToolbars.MainMobile) |
|||
{ |
|||
context.Toolbar.Items.Add(new ToolbarItem(typeof(MyMobileComponent))); |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
Loading…
Reference in new issue