- 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)
-
0
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; } }
-
0
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
andafterLeptonXInitialization
, or are those built in?
-
0
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.