Open Closed

Empty Layout for Blazor Server LeptonX? #4562


User avatar
0
csykes created
  • ABP Framework version: v6.0.0
  • UI type: Blazor
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): no
  • Exception message and stack trace:
  • Steps to reproduce the issue:"

We have a Blazor Server app that uses the LeptonX theme, and I was wondering how we could assign the Empty layout to a specific razor page/component. We have a publicly accessible page within our app which we would like to be free of the typical layout parts (side menu, toolbars, etc.). I see an 'Account' and 'Application' folder in Blazor/Themes/LeptonX/Layouts, but no 'Empty' folder.


3 Answer(s)
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Yes, there is no Empty layout for Blazor, but it's easy to do yourself.

    For example:

    You can remove the components you want

    EmptyLayout.razor

    @inherits LayoutComponentBase
    @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.Common
    @using Volo.Abp.Ui.Branding
    @using Volo.Abp.BlazoriseUI.Components
    @using Volo.Abp.AspNetCore.Components.Web.Theming.Components
    @using Volo.Abp.Ui.LayoutHooks
    @using Volo.Abp.AspNetCore.Components.Web.Theming.Components.LayoutHooks
    @using Volo.Abp.AspNetCore.Components.Web.Theming.Layout
    
    @inject IBrandingProvider BrandingProvider
    
    <div class="lpx-scroll-container ps">
    	<div id="lpx-wrapper">
    		<div class="lpx-content-container">
    			<div class="lpx-topbar-container">
    				<div class="lpx-topbar">
    					<Breadcrumbs />
    				</div>
    			</div>
    			<div class="lpx-content-wrapper">
    				<div class="lpx-content">
    					<ContentToolbar />
    					<PageAlert />
    					<LayoutHook Name="@LayoutHooks.Body.First" Layout="@StandardLayouts.Empty" />
    					@Body
    					<LayoutHook Name="@LayoutHooks.Body.Last" Layout="@StandardLayouts.Empty" />
    					<DynamicLayoutComponent />
    					<UiMessageAlert />
    					<UiNotificationAlert />
    				</div>
    			</div>
    			<footer>
    				<Footer />
    			</footer>
    		</div>
    	</div>
    </div>
    
    

    EmptyLayout.razor.cs

    public partial class EmptyLayout
    {
        [Inject]
        protected IAbpUtilsService UtilsService { get; set; }
    
        [Inject]
        IJSRuntime JSRuntime { get; set; }
    
        [Inject]
        protected IOptions<LeptonXThemeOptions> Options { get; set; }
    
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                await UtilsService.AddClassToTagAsync("body", GetBodyClassName());
                await JSRuntime.InvokeVoidAsync("initLeptonX", new[] { "side-menu", Options.Value.DefaultStyle });
                await JSRuntime.InvokeVoidAsync("afterLeptonXInitialization", new[] { "side-menu", Options.Value.DefaultStyle });
                
            }
        }
    
        private string GetBodyClassName()
        {
            return "lpx-theme-" + Options.Value.DefaultStyle;
        }
    }
    
  • User Avatar
    0
    csykes created

    Hi,

    Yes, there is no Empty layout for Blazor, but it's easy to do yourself.

    For example:

    You can remove the components you want

    EmptyLayout.razor

    @inherits LayoutComponentBase 
    @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.Common 
    @using Volo.Abp.Ui.Branding 
    @using Volo.Abp.BlazoriseUI.Components 
    @using Volo.Abp.AspNetCore.Components.Web.Theming.Components 
    @using Volo.Abp.Ui.LayoutHooks 
    @using Volo.Abp.AspNetCore.Components.Web.Theming.Components.LayoutHooks 
    @using Volo.Abp.AspNetCore.Components.Web.Theming.Layout 
     
    @inject IBrandingProvider BrandingProvider 
     
    <div class="lpx-scroll-container ps"> 
      <div id="lpx-wrapper"> 
      	<div class="lpx-content-container"> 
      		<div class="lpx-topbar-container"> 
      			<div class="lpx-topbar"> 
      				<Breadcrumbs /> 
      			</div> 
      		</div> 
      		<div class="lpx-content-wrapper"> 
      			<div class="lpx-content"> 
      				<ContentToolbar /> 
      				<PageAlert /> 
      				<LayoutHook Name="@LayoutHooks.Body.First" Layout="@StandardLayouts.Empty" /> 
      				@Body 
      				<LayoutHook Name="@LayoutHooks.Body.Last" Layout="@StandardLayouts.Empty" /> 
      				<DynamicLayoutComponent /> 
      				<UiMessageAlert /> 
      				<UiNotificationAlert /> 
      			</div> 
      		</div> 
      		<footer> 
      			<Footer /> 
      		</footer> 
      	</div> 
      </div> 
    </div> 
     
    

    EmptyLayout.razor.cs

    public partial class EmptyLayout 
    { 
        [Inject] 
        protected IAbpUtilsService UtilsService { get; set; } 
     
        [Inject] 
        IJSRuntime JSRuntime { get; set; } 
     
        [Inject] 
        protected IOptions<LeptonXThemeOptions> Options { get; set; } 
     
        protected override async Task OnAfterRenderAsync(bool firstRender) 
        { 
            if (firstRender) 
            { 
                await UtilsService.AddClassToTagAsync("body", GetBodyClassName()); 
                await JSRuntime.InvokeVoidAsync("initLeptonX", new[] { "side-menu", Options.Value.DefaultStyle }); 
                await JSRuntime.InvokeVoidAsync("afterLeptonXInitialization", new[] { "side-menu", Options.Value.DefaultStyle }); 
                 
            } 
        } 
     
        private string GetBodyClassName() 
        { 
            return "lpx-theme-" + Options.Value.DefaultStyle; 
        } 
    } 
    

    Thanks for this. I have a few questions:

    1. How can we make use of this layout within a component/page?
    2. The @using Volo.Abp.Ui.LayoutHooks and @using Volo.Abp.AspNetCore.Components.Web.Theming.Components.LayoutHooks are throwing errors. It says that the type or namespace doesn't exist. I've tried to download v6.0.0 of both packages, but still the same error.
    3. Could you provide the JS for initLeptonX and afterLeptonXInitialization, or are those built in?
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Sorry I forget the LayoutHooks is available for 2.0.0.

    EmptyLayout.razor

    @inherits LayoutComponentBase
    @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.Common
    @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenu
    @using Volo.Abp.Ui.Branding
    @using Volo.Abp.AspNetCore.Components.Web.Theming.Components
    
    @inject IBrandingProvider BrandingProvider
    
    <link rel="stylesheet" href="/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/top-menu/css/bootstrap-light.css">
    <link rel="stylesheet" href="/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/top-menu/css/light.css">
    <link rel="stylesheet" href="/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/top-menu/css/layout-bundle.css">
    <link rel="stylesheet" href="/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/top-menu/css/abp-bundle.css">
    <link rel="stylesheet" href="/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/top-menu/css/blazor-bundle.css">
    
    <div id="lpx-wrapper">
    
        <div class="lpx-topbar-container">
            <div class="lpx-topbar">
                <div class="lpx-breadcrumb-wrapper d-flex">
                    <Breadcrumbs />
                </div>
            </div>
        </div>
        <div class="lpx-content-container" style="margin-left: 0; margin-right: 0">
            <div class="lpx-content-wrapper">
                <div class="lpx-content">
                    <ContentToolbar />
                    <PageAlert />
                    @Body
                    <DynamicLayoutComponent />
                    <UiMessageAlert />
                    <UiNotificationAlert />
                </div>
            </div>
    
            <Footer />
        </div>
    
    </div>
    

    Index.razor

    @layout EmptyLayout
    
    <Card>
        <CardBody>
            <h2>
                Hello world
            </h2>
        </CardBody>
    </Card>
    

    Could you provide the JS for initLeptonX and afterLeptonXInitialization, or are those built in?

    It's built-in, but you don't need it in the empty layout.

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