Open Closed

Add components to Toolbar in LeptonX #4148


User avatar
0
joe@tronactive.com created
  • ABP Framework version: v6.0.1
  • UI type: Blazor Server
  • DB provider: EF Core

I am trying to add some basic components to the top toolbar in the LeptonX theme. I am just trying to start by adding a drop-down but cannot get it to show up. I added my own version of SideMenuLayout.Razor named MySideMenuLayout which inherits from SideMenuLayout. I think it has to do with where I am placing the files. I tried two places. First one was Themes\LeptonX\Components\ApplicationLayout. Second place was Components\ApplicationLayout\MySideMenuLayout.razor and MySideMenuLayout.razor.

Here is the razor file. 

@using Volo.Abp.AspNetCore.Mvc.UI.Components.LayoutHook

<div class="lpx-scroll-container ps">
	<div id="lpx-wrapper">
		<MainHeader />

		<div class="lpx-content-container">
			<div class="lpx-topbar-container">
                <div class="lpx-topbar">
                    <MainHeaderBranding />
                    <p>Select a Customer</p>
                    <Dropdown>
                        <DropdownToggle Color="Color.Primary">
                            Dropdown
                        </DropdownToggle>
                        <DropdownMenu>
                            <DropdownItem>UAT Customer</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                    <Breadcrumbs/>
                </div>
			</div>
			<div class="lpx-content-wrapper">
				<div class="lpx-content">
					<ContentToolbar />
					<PageAlert />
                    @typeof(LayoutHooks.Body)
                    <DynamicLayoutComponent />
					<UiMessageAlert />
					<UiNotificationAlert />
				</div>
			</div>
		</div>

		<MobileNavbar />

		<div class="lpx-toolbar-container">
			<MainHeaderToolbar />
		</div>
	</div>
</div>

Here is the cs file

using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Options;
using Microsoft.JSInterop;
using Volo.Abp.AspNetCore.Components.Web;
using Volo.Abp.DependencyInjection;
using Volo.Abp.LeptonX.Shared;


namespace Cure8.Blazor.Components.ApplicationLayout;

[ExposeServices(typeof(SideMenuLayout))]
[Dependency(ReplaceServices = true)]
public partial class SideMenuLayout : Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenuLayout
{

}


2 Answer(s)
  • User Avatar
    0
    joe@tronactive.com created

    Does anyone have any ideas?

  • User Avatar
    0
    EngincanV created
    Support Team .NET Developer

    Hi, if you are exposing the related services the place where you put your files is not important.

    You just need to add the following lines to the top of your MySideLayout.razor file:

    @inherits SideMenuLayout
    @attribute [ExposeServices(typeof(SideMenuLayout))]
    @attribute [Dependency(ReplaceServices = true)]
    

    And please don't forget to remove them from your code-behind class (MySideLayout.razor.cs).

    See the documentation for more info about customizing layouts: https://docs.abp.io/en/commercial/latest/themes/lepton-x/blazor?UI=BlazorServer#layouts

Made with ❤️ on ABP v9.1.0-preview. Updated on December 12, 2024, 07:15