Skip to content

Latest commit

 

History

History
71 lines (46 loc) · 2.72 KB

Blazor-Pure-Theme.md

File metadata and controls

71 lines (46 loc) · 2.72 KB
Raw

Blazor UI: Pure Theme

//[doc-params]
{
    "UI": ["Blazor", "BlazorServer"]
}

Pure Theme is an Abp Blazor theme built on top of Blazorise.

Blazor Pure Theme

Installation

{{if UI == "Blazor"}}

If your project initially installed the Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme NuGet package, please remove it first.

  • Install the Dignite.Abp.AspNetCore.Components.WebAssembly.PureTheme NuGet package into your Blazor WebAssembly Web project.

  • Add DigniteAbpAspNetCoreComponentsWebAssemblyPureThemeModule to the [DependsOn(...)] property list in the module class.

  • In the ConfigureServices method, add the root component of the Dignite.Abp.AspNetCore.Components.Web.PureTheme.Themes.Pure.App application in your BlazorWebAssemblyHostBuilder:

    var builder = context.Services.GetSingletonInstance<WebAssemblyHostBuilder>();
builder.RootComponents.Add<App>("#ApplicationContainer");

    #ApplicationContainer is an element in your index.html (<div id="ApplicationContainer">Loading...</div>).

  • Run abp bundle in your Blazor project.

{{end}}

{{if UI == "BlazorServer"}}

If your project initially installed the Volo.Abp.AspNetCore.Components.Server.BasicTheme NuGet package, please remove it first.

  • Make sure you have installed the AspNetCore Pure Theme.

  • Install the Dignite.Abp.AspNetCore.Components.Server.PureTheme NuGet package into your Blazor Server Web project.

  • Add DigniteAbpAspNetCoreComponentsServerPureThemeModule to the [DependsOn(...)] property list in the module class.

  • Make the following changes in the Pages/_Host.cshtml file:

    • At the top of the page, include the following namespaces:

      @using Dignite.Abp.AspNetCore.Components.Server.PureTheme.Bundling
@using Dignite.Abp.AspNetCore.Components.Web.PureTheme.Themes.Pure

    • Between the <head> tags, add the Pure Theme styles:

      <abp-style-bundle name="@BlazorPureThemeBundles.Styles.Global" />

    • In the body of the page, add the App component from the Pure Theme:

      <component type="typeof(App)" render-mode="Server" />

    • At the bottom of the <body> tag, add the Pure Theme JavaScript:

      <abp-script-bundle name="@BlazorPureThemeBundles.Scripts.Global" />

{{end}}