How to Import Ant Design Blazor into an existing project

 

Ant Design of Blazor

Import Ant Design Blazor into an existing project

• Go to the project folder of the application and install the Nuget package reference

  $ dotnet add package AntDesign --version 0.1.0-*
  

• Register the services

  services.AddAntDesign();
  

• Link the static files in wwwroot/index.html (WebAssembly) or Pages/_Host.cshtml (Server)

  <link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
  <script src="_content/AntDesign/js/ant-design-blazor.js"></script>
  

• Add namespace in _Imports.razor

  @using AntDesign
  

• To display the pop-up component dynamically, you need to add the <AntContainer /> component in App.razor.

  <Router AppAssembly="@typeof(MainLayout).Assembly">
      <Found Context="routeData">
          <RouteView RouteData="routeData" DefaultLayout="@typeof(MainLayout)" />
      </Found>
      <NotFound>
          <LayoutView Layout="@typeof(MainLayout)">
              <Result Status="404" />
          </LayoutView>
      </NotFound>
  </Router>
  
  <AntContainer />   <-- add this component ✨
  

• Finally, it can be referenced in the `.razor' component!

  <Button Type="primary">Hello World!</Button>

      How to use Ant Blazor Grid

How to sort Ant Blazor Grid - Part 2

https://youtu.be/uWZ3VggP0xA

How to use Ant Blazor Grid - Part 1

https://youtu.be/wtfkzv_urNI