2.6 KiB
order | title |
---|---|
1 | Getting Started |
Ant Design of Blazor is dedicated to providing a good development experience for programmers.
Before delving into Ant Design Blazor, a good knowledge of Blazor and .NET Core is needed.
First Local Development
During development, you may need to compile and debug .NET code, and even proxy some of the requests to mock data or other external services. All of these can be done with quick feedback provided through hot reloading of changes.
Such features, together with packaging the production version, are covered in this work flow.
Installation
We strongly recommend to develop Blazor with the .NET Core SDK
. You can install it from https://dotnet.microsoft.com/download?WT.mc_id=DT-MVP-5003987
.
Create a New Blazor WebAssembly Project
A new project can be created using .NET Core SDK.
$ dotnet new blazorwasm -o PROJECT-NAME
dotnet cli
will run dotnet restore
after a project is created. If it fails, you can run dotnet restore
by yourself.
Development & Debugging
Run your project now.
$ dotnet run
Building & Deployment
$ dotnet publish -c release -o dist
Entry files will be built and generated in dist/wwwroot
directory, where we can deploy it to different environments.
Install Ant Design Blazor
$ dotnet add package AntDesign
Register Dependencies
Add dependency registration in Startup.cs
.
public void ConfigureServices(IServiceCollection services)
{
...
services.AddAntDesign();
}
Import Styles
Use styles and JS
-
Import the styles and script in
wwwroot/index.html
<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 inApp.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>