Browse Source

Add examples for customizing the footer in Blazor and MVC themes.

pull/22692/head
maliming 10 months ago
parent
commit
c880f7b051
No known key found for this signature in database GPG Key ID: A646B9CB645ECEA4
  1. 39
      docs/en/ui-themes/lepton-x/blazor.md
  2. BIN
      docs/en/ui-themes/lepton-x/images/leptonx-mvc-customizing-footer.png
  3. 14
      docs/en/ui-themes/lepton-x/mvc.md

39
docs/en/ui-themes/lepton-x/blazor.md

@ -316,8 +316,45 @@ namespace LeptonX.DemoApp.Blazor.MyComponents
> Don't forget to remove repeated attributes from the razor page!
---
#### Customizing Footer Example
Add a new `LeptonXFooter.razor` file and override the `Footer` component.
```cs
@using Volo.Abp.DependencyInjection
@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu
@inherits Footer
@attribute [ExposeServices(typeof(Footer))]
@attribute [Dependency(ReplaceServices = true)]
<div class="lpx-footbar-container">
<div class="lpx-footbar">
<div class="lpx-footbar-copyright">
<span>@DateTime.UtcNow.Year©</span>
<a href="https://leptontheme.com/" target="_blank">Lepton ThemeXXX</a>
<span>by</span>
<a href="https://volosoft.com/" target="_blank">Volosoft</a>
</div>
<div class="lpx-footbar-solo-links">
<a href="#">About</a>
<a href="#">Privacy</a>
<a href="#">Contact</a>
</div>
</div>
</div>
````
> If you are using **Top Menu Layout**, You can change the namespace to
```diff
- @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu
+ @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenu
```
Use above way to customize the other components as well.
---
## Common Components

BIN
docs/en/ui-themes/lepton-x/images/leptonx-mvc-customizing-footer.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

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

@ -138,6 +138,20 @@ Layout options of the MVC Razor Pages UI can be manageable by using **LeptonXThe
> - **_Sidebar.cshtml**
> - **_Toolbar.cshtml**
#### Customizing Footer Example
Add the **_Footer.cshtml** file under the **Themes/LeptonX/Layouts/Application** folder to customize the footer. You can customize the **_Sidebar.cshtml** and **_Toolbar.cshtml** files as well.
![Customizing Footer](images/leptonx-mvc-customizing-footer.png)
```html
<div class="text-center py-2 lpx-footer">
<span class="copyright-text">
@DateTime.Now.Year © AbpSolution1<br />
</span>
</div>
````
### Account Layout
![Account layout](images/leptonx-account-layout-new.png)

Loading…
Cancel
Save