Ant Design Usage
Note: Before continuing please make sure that you already have a Blazor project created.
If not please go to the official Blazor website and learn how to create one.
Step 1: Download Blazorise from NuGet
First step is to install a AntDesign provider for Blazorise:
Install-Package Blazorise.AntDesign
You also need to install the icon package:
Install-Package Blazorise.Icons.FontAwesome
Step 2: Add Static Files
The next step is to change your
index.html
or _Host.cshtml
file and include the CSS and JS source files:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.0.0/antd.css" integrity="sha256-nzhI/tsi9npc5ir08wCgBpg43SEIrc7crRJLsHE0/60=" crossorigin="anonymous" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"> <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
Note: Don't forget to remove bootstrap JS and CSS files that comes with the default Blazor project template.
Step 3. Define Usings
In your main _Imports.razor add:
@using Blazorise
Step 4. Register Blazorise Services
Add the following lines to the relevant sections of
Program.cs
.
using Blazorise; using Blazorise.AntDesign; using Blazorise.Icons.FontAwesome; builder.Services .AddBlazorise( options => { options.Immediate = true; } ) .AddAntDesignProviders() .AddFontAwesomeIcons();
Step 5. PWA & Offline Support (optional)
For information about PWAs & offline support, please take a look at our PWA docs.