Xm.Abp.BootstrapBlazorUI

An Abp Blazor Theme based BootstrapBlazor !

Samples

Check the samples

Quick Start

The first step is to use ABP CLI to create a new project.

abp new BookStore -u blazor

See the ABP official documentation to learn ABP framework.

Open BookStore.Blazor.csproj and replace with the following:

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

  <Import Project="..\..\common.props" />

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.0" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.0" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="Volo.Abp.Autofac.WebAssembly" Version="5.1.4" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="Xm.Abp.IdentityManagement.Blazor.WebAssembly.BootstrapBlazorUI" Version="0.1.0" />
    <PackageReference Include="Xm.Abp.SettingManagement.Blazor.WebAssembly.BootstrapBlazorUI" Version="0.1.0" />
    <PackageReference Include="Xm.Abp.TenantManagement.Blazor.WebAssembly.BootstrapBlazorUI" Version="0.1.0" />
  </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="..\..\src\BookStore.HttpApi.Client\BookStore.HttpApi.Client.csproj" />
  </ItemGroup>

</Project>

Open _Imports.razor and add with the following:

@using BootstrapBlazor
@using Xm.Abp.BootstrapBlazorUI
@using Xm.Abp.BootstrapBlazorUI.Components
@using Xm.Abp.AspnetCore.Components.Web.BootstrapBlazorTheme.Layout

Open BookStoreBlazorModule make the following changes:

• Remove the ConfigureBlazorise method
• Fix wrong using namespace
• Update module dependencies
  • For example, replace AbpIdentityBlazorWebAssemblyModule with AbpIdentityBlazorWebAssemblyBootstrapBlazorModule

Open Index.razor and replace with the following:

@page "/"
@inherits BookStoreComponentBase

<AbpPageHeader Title="Index"></AbpPageHeader>

<div class="page-content">
    <div style="text-align: center">
        
        <Alert Color="@Color.Success"
               Icon="fa fa-check-circle">
            Congratulations, BookStore is successfully running!
        </Alert>

        <Divider/>

    </div>
</div>

Run the dotnet build & abp bundle command in the BookStore.Blazor folder.

Reference

Lsw.Abp.AntDesignUI