Browse Source

Merge pull request #22766 from abpframework/auto-merge/rel-9-2/3691

Merge branch dev with rel-9.2
pull/22776/head
maliming 10 months ago
committed by GitHub
parent
commit
af1e92c5af
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
  1. BIN
      docs/en/ui-themes/lepton-x/images/account-layout-background-style.png
  2. 16
      docs/en/ui-themes/lepton-x/mvc.md

BIN
docs/en/ui-themes/lepton-x/images/account-layout-background-style.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

16
docs/en/ui-themes/lepton-x/mvc.md

@ -47,7 +47,8 @@ Before starting to customize the theme, you can consider downloading the source
---
### Appearance
You can set a default theme, add or remove appearance styles by using **LeptonXThemeOptions**.
You can set a default theme, add or remove appearance styles and layout background styles by using **LeptonXThemeOptions**.
- `DefaultStyle`: Defines the default fallback theme. The default value is **Dim**
@ -133,15 +134,26 @@ Layout options of the MVC Razor Pages UI can be manageable by using **LeptonXThe
- `MobileMenuSelector`: Defines items to be displayed at the mobile menu. The default value is the first 2 items from the main menu items.
```csharp
Configure<LeptonXThemeMvcOptions>(options =>
{
options.MobileMenuSelector = items => items.Where(x => x.MenuItem.Name == "MyProjectName.Home" || x.MenuItem.Name == "MyProjectName.Dashboard");
});
```
![leptonx-mobile-menu-preview](images/mobile-menu-preview.png)
- `AccountLayoutBackgroundStyle`: Defines the background style of the account layout.
```csharp
Configure<LeptonXThemeMvcOptions>(options =>
{
options.MobileMenuSelector = items => items.Where(x => x.MenuItem.Name == "MyProjectName.Home" || x.MenuItem.Name == "MyProjectName.Dashboard");
options.AccountLayoutBackgroundStyle = "background-image: url('/images/login-background-image.svg') !important;";
});
```
![leptonx-account-layout-background-style](images/account-layout-background-style.png)
### Layouts
**LeptonX** offers two **ready-made layouts** for your web application. One of them is **placed** with the **menu items** on the **top** and the other with the **menu items** on the **sides**.

Loading…
Cancel
Save