diff --git a/docs/en/framework/ui/blazor/toolbars.md b/docs/en/framework/ui/blazor/toolbars.md index b365116b2d..7b9992a15a 100644 --- a/docs/en/framework/ui/blazor/toolbars.md +++ b/docs/en/framework/ui/blazor/toolbars.md @@ -14,6 +14,8 @@ Also, [LeptonX Lite Theme](../../../ui-themes/lepton-x-lite/blazor.md) has 2 dif | :---: | :---: | | ![leptonx](../../../images/leptonxlite-toolbar-main-example.png) | ![leptonx](../../../images/leptonxlite-toolbar-mainmobile-example.png) | +Also, [LeptonX Theme](../../../ui-themes/lepton-x/blazor.md) has 2 different toolbars for desktop and mobile views which defined as constants: `LeptonXToolbars.Main`, `LeptonXToolbars.MainMobile`. + ## Example: Add a Notification Icon In this example, we will add a **notification (bell) icon** to the left of the language switch item. A item in the toolbar should be a **Razor Component**. So, first, create a new razor component in your project (the location of the component doesn't matter): diff --git a/docs/en/ui-themes/lepton-x/blazor.md b/docs/en/ui-themes/lepton-x/blazor.md index 78e0dc433d..24f17b50ea 100644 --- a/docs/en/ui-themes/lepton-x/blazor.md +++ b/docs/en/ui-themes/lepton-x/blazor.md @@ -167,7 +167,6 @@ Layout options of Blazor UI can be manageable via using **LeptonXThemeMvcOptions }); ``` - {{if UI == "Blazor"}} #### Updating Bundles on Layout Changes @@ -195,6 +194,35 @@ abp bundle {{end}} +### Toolbars + +LeptonX includes separeted toolbars for desktop & mobile. You can manage toolbars independently. Toolbar names can be accessible in the **LeptonXToolbars** class. + +- `LeptonXToolbars.Main` +- `LeptonXToolbars.MainMobile` + +```csharp +public async Task ConfigureToolbarAsync(IToolbarConfigurationContext context) +{ + if (context.Toolbar.Name == LeptonXToolbars.Main) + { + context.Toolbar.Items.Add(new ToolbarItem(typeof(MyDesktopComponent))); + } + + if (context.Toolbar.Name == LeptonXToolbars.MainMobile) + { + context.Toolbar.Items.Add(new ToolbarItem(typeof(MyMobileComponent))); + } + + return Task.CompletedTask; +} +``` + +{{if UI == "BlazorServer"}} + +> _You can visit the [Toolbars Documentation](../../framework/ui/blazor/toolbars.md) for better understanding._ + +{{end}} ## Layouts