Empty Layout for Blazor Server LeptonX? #4562 | Support

csykes created 2 years ago

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)

liangshiwei created 2 years ago

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;
    }
}

csykes created one year ago

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:

How can we make use of this layout within a component/page?
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.
Could you provide the JS for initLeptonX and afterLeptonXInitialization, or are those built in?

liangshiwei created one year ago

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.

Have an answer to this question? Log in and write your answer.