LeptonX Lite Mvc provides **layouts** for your **user interface** based [ABP Framework Theming](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Theming). You can use **layouts** to **organize your user interface**.
LeptonX Lite MVC provides **layouts** for your **user interface** based [ABP Framework Theming](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Theming). You can use **layouts** to **organize your user interface**.
The main responsibility of a theme is to **provide** the layouts. There are **three pre-defined layouts that must be implemented by all the themes:**
@ -61,11 +61,12 @@ The main responsibility of a theme is to **provide** the layouts. There are **th
* **Empty:** The **Minimal** layout that **has no layout components** at all.
**Layout names** are **constants** defined in the `LeptonXLiteTheme` class in the **Mvc** project **root**.
**Layout names** are **constants** defined in the `LeptonXLiteTheme` class in the **MVC** project **root**.
> The layout pages define under the `Themes/LeptonXLite/Layouts` folder and you can **override it** by creating a file with the **same name** and **under** the **same folder**.
### 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`
@ -88,23 +89,28 @@ public class MyProjectNameMainToolbarContributor : IToolbarContributor
}
}
```
# LeptonX Lite Mvc Components
Abp **helps** you make **highly customizable UI**. You can easily **customize** your themes to fit your needs. **The Virtual File System** makes it possible to **manage files** that **do not physically** exist on the **file system** (disk). It's mainly used to embed **(js, css, image..)** files into assemblies and **use them like** physical files at runtime. An application (or another module) can **override** a **virtual file of a module** just like placing a file with the **same name** and **extension** into the **same folder** of the **virtual file**.
# LeptonX Lite MVC Components
ABP **helps** you make **highly customizable UI**. You can easily **customize** your themes to fit your needs. **The Virtual File System** makes it possible to **manage files** that **do not physically** exist on the **file system** (disk). It's mainly used to embed **(js, css, image..)** files into assemblies and **use them like** physical files at runtime. An application (or another module) can **override** a **virtual file of a module** just like placing a file with the **same name** and **extension** into the **same folder** of the **virtual file**.
LeptonX Lite is built on the [Abp Framework](https://abp.io/), so you can **easily** customize your Asp.Net Core Mvc user interface by following [Abp Mvc UI Customization](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Customization-xUser-Interface).
LeptonX Lite is built on the [Abp Framework](https://abp.io/), so you can **easily** customize your Asp.Net Core MVC user interface by following [Abp Mvc UI Customization](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Customization-xUser-Interface).
## Brand Component
## Branding Component
The **brand component** is a simple component that can be used to display your brand. It contains a **logo** and a **company name**.
The **branding component** is a simple component that can be used to display your brand. It contains a **logo** and a **company name**.
### How to override the Brand Component in LeptonX Lite Mvc
### How to override the Branding Component in LeptonX Lite MVC
* The **branding component page (.cshtml file)** is defined in the `Themes/LeptonXLite/Components/Brand/Default.cshtml` file and you can **override it** by creating a file with the **same name** and **under** the **same folder**.
* The **branding component (C# file)** is defined in the `Themes/LeptonXLite/Components/Brand/MainNavbarBrandViewComponent.cs` file and you can **override it** by creating a file with the **same name** and under the **same folder**.
* The **brand component page (.cshtml file)** is defined in the `Themes/LeptonXLite/Components/Brand/Default.cshtml` file and you can **override it** by creating a file with the **same name** and **under** the **same folder**.
### How to override the favicon in LeptonX Lite MVC
* The **brand component (C# file)** is defined in the `Themes/LeptonXLite/Components/Brand/MainNavbarBrandViewComponent.cs` file and you can **override it** by creating a file with the **same name** and under the **same folder**.
You can add a new favicon to the `~/wwwroot/favicon.svg` and `~/wwwroot/favicon.ico` paths to override the current favicon.
## Breadcrumb Component
@ -112,7 +118,7 @@ On websites that have a lot of pages, **breadcrumb navigation** can greatly **en
### How to override the Breadcrumb Component in LeptonX Lite Mvc
### How to override the Breadcrumb Component in LeptonX Lite MVC
* The **breadcrumb component page (.cshtml file)** is defined in the `Themes/LeptonXLite/Components/Breadcrumbs/Default.cshtml` file and you can **override it** by creating a file with the **same name** and **under** the **same folder**.
@ -124,7 +130,7 @@ Sidebar menus have been used as **a directory for Related Pages** to a **Service
### How to override the Sidebar Menu Component in LeptonX Lite Mvc
### How to override the Sidebar Menu Component in LeptonX Lite MVC
* **Sidebar menu page (.cshtml)** is defined in the `Themes/LeptonXLite/Components/Menu/Default.cshtml` file and you can **override it** by creating a file with the **same name** and **under** the **same folder**.
@ -138,7 +144,7 @@ Provides contextual **feedback messages** for typical user actions with the hand
### How to override the Page Alerts Component in LeptonX Lite Mvc
### How to override the Page Alerts Component in LeptonX Lite MVC
* The **page alerts component page (.cshtml file)** is defined in the `Themes/LeptonXLite/Components/PageAlerts/Default.cshtml` file and you can **override it** by creating a file with the **same name** and **under** the **same folder**.
@ -148,7 +154,7 @@ Provides contextual **feedback messages** for typical user actions with the hand
Toolbar items are used to add **extra functionality to the toolbar**. The toolbar is a **horizontal bar** that **contains** a group of **toolbar items**.
### How to override the Toolbar Component in LeptonX Lite Mvc
### How to override the Toolbar Component in LeptonX Lite MVC
* The **toolbar component page (.cshtml file)** is defined in the `Themes/LeptonXLite/Components/Toolbar/Default.cshtml` file and you can **override it** by creating a file with the **same name** and **under** the **same folder**.
@ -158,7 +164,7 @@ Toolbar items are used to add **extra functionality to the toolbar**. The toolba
The toolbar item is a **single item** that **contains** a **link**, an **icon**, a **label** etc..
### How to override the Toolbar Item Component in LeptonX Lite Mvc
### How to override the Toolbar Item Component in LeptonX Lite MVC
* The **toolbar item component page (.cshtml file)** is defined in the `Themes/LeptonXLite/Components/ToolbarItems/Default.cshtml` file and you can **override it** by creating a file with the **same name** and **under** the **same folder**.
@ -172,7 +178,7 @@ Think about a **multi-lingual** website and the first thing that could **hit you
### How to override the Language Switch Component in LeptonX Lite Mvc
### How to override the Language Switch Component in LeptonX Lite MVC
* The **language switch component page (.cshtml file)** is defined in the `Themes/LeptonXLite/Components/LanguageSwitch/Default.cshtml` file and you can **override it** by creating a file with the **same name** and **under** the **same folder**.
@ -184,7 +190,7 @@ The **mobile** **language switch component** is used to switch the language of t
### How to override the Mobile Language Switch Component in LeptonX Lite Mvc
### How to override the Mobile Language Switch Component in LeptonX Lite MVC
* The **mobile language switch component page (.cshtml file)** is defined in the `Themes/LeptonXLite/Components/MobileLanguageSwitch/Default.cshtml` file and you can **override it** by creating a file with the **same name** and **under** the **same folder**.
@ -196,7 +202,7 @@ The **User Menu** is the **menu** that **drops down** when you **click your name
### How to override the User Menu Component in LeptonX Lite Mvc
### How to override the User Menu Component in LeptonX Lite MVC
* The **user menu component page (.cshtml file)** is defined in the `Themes/LeptonXLite/Components/UserMenu/Default.cshtml` file and you can **override it** by creating a file with the **same name** and **under** the **same folder**.
@ -208,7 +214,7 @@ The **mobile user menu component** is used to display the **user menu on mobile
### How to override the Mobile User Menu Component in LeptonX Lite Mvc
### How to override the Mobile User Menu Component in LeptonX Lite MVC
* The **mobile user menu component page (.cshtml file)** is defined in the `Themes/LeptonXLite/Components/MobileUserMenu/Default.cshtml` file and you can **override it** by creating a file with the **same name** and **under** the **same folder**.
> Don't forget to remove the repeated attributes from the razor page!
### 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`
@ -188,9 +189,9 @@ LeptonX Blazor is built on the basis of components. You can use the components i
### Branding Component
The **brand component** is a simple component that can be used to display your brand. It contains a **logo** and a **company name**.
The **branding component** is a simple component that can be used to display your brand. It contains a **logo** and a **company name**.
Startup templates contain `favicon.ico` files under the `wwwroot` folder of the Blazor application. You can change this file to override the current favicon.
### Breadcrumb Component
On websites that have a lot of pages, **breadcrumb navigation** can greatly **enhance the way users find their way** around. In terms of **usability**, breadcrumbs reduce the number of actions a website **visitor** needs to take in order to get to a **higher-level page**, and they **improve** the **findability** of **website sections** and **pages**.
@ -241,6 +246,7 @@ On websites that have a lot of pages, **breadcrumb navigation** can greatly **en
```
* If you prefer to use a code-behind file for the C# code of your component, create a razor component, like `MyBreadcrumbsComponent.razor.cs`, in your blazor application as shown below:
*
```csharp
using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite;
Sidebar menus have been used as **a directory for Related Pages** for a **Service** offering, **Navigation** items for a **specific service** or topic and even just as **Links** the user may be interested in.
@ -278,6 +284,7 @@ Sidebar menus have been used as **a directory for Related Pages** for a **Servic
```
* If you prefer to use a code-behind file for the C# code of your component, create a razor component, like `MyMainMenu.razor.cs`, in your blazor application as shown below:
```csharp
using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite.Navigation;
using Volo.Abp.DependencyInjection;
@ -315,6 +322,7 @@ Toolbar items are used to add **extra functionality to the toolbar**. The toolba
```
* If you prefer to use a code-behind file for the C# code of your component, create a razor component, like `MyToolbarItemsComponent.razor.cs`, in your blazor application as shown below:
```csharp
using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite;
Think about a **multi-lingual** website and the first thing that could **hit your mind** is **the language switch component**. A **navigation bar** is a **great place** to **embed a language switch**. By embedding the language switch in the navigation bar of your website, you would **make it simpler** for users to **find it** and **easily** switch the **language**<u>**without trying to locate it across the website.**</u>
#### How to Override the Language Switch Component
@ -352,6 +360,7 @@ Think about a **multi-lingual** website and the first thing that could **hit you
```
* If you prefer to use a code-behind file for the C# code of your component, create a razor component, like `MyLanguageSwitchComponent.razor.cs`, in your blazor application as shown below:
```csharp
using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite.Toolbar;
The **mobile****language switch component** is used to switch the language of the website **on mobile devices**. The mobile language switch component is a **dropdown menu** that **contains all the languages** of the website.
#### How to Override the Mobile Language Switch Component
@ -389,6 +398,7 @@ The **mobile** **language switch component** is used to switch the language of t
```
* If you prefer to use a code-behind file for the C# code of your component, create a razor component, like `MyMobilLanguageSwitchComponent.razor.cs`, in your blazor application as shown below:
```csharp
using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite.Toolbar;
The **User Menu** is the **menu** that **drops down** when you **click your name** or **profile picture** in the **upper right corner** of your page (**in the toolbar**). It drops down options such as **Settings**, **Logout**, etc.
@ -426,6 +436,7 @@ The **User Menu** is the **menu** that **drops down** when you **click your name
```
* If you prefer to use a code-behind file for the C# code of your component, create a razor component, like `MyUserMenuComponent.razor.cs`, in your blazor application as shown below:
```csharp
using Volo.Abp.AspNetCore.Components.Server.LeptonXLiteTheme.Themes.LeptonXLite.Toolbar;
The **mobile user menu component** is used to display the **user menu on mobile devices**. The mobile user menu component is a **dropdown menu** that contains all the **options** of the **user menu**.
#### How to override the Mobile User Menu Component
@ -463,6 +474,7 @@ The **mobile user menu component** is used to display the **user menu on mobile
```
* If you prefer to use a code-behind file for the C# code of your component, create a razor component, like `MyMobileUserMenuComponent.razor.cs`, in your blazor application as shown below:
```csharp
using Volo.Abp.AspNetCore.Components.Server.LeptonXLiteTheme.Themes.LeptonXLite.Toolbar;
Enis Necipoglu
3 years ago
GitHub