docs: missing the setup of AntContainer (#3504)

This commit is contained in:
James Yeung 2023-11-12 16:44:07 +08:00 committed by GitHub
parent ed0e864946
commit cc92bc8a3a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 8 deletions

View File

@ -65,9 +65,38 @@ public void ConfigureServices(IServiceCollection services)
#### Use styles and JS
Import the styles and script in `wwwroot/index.html`
- Import the styles and script in `wwwroot/index.html`
```html
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>
```
```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`
```csharp
@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!
```html
<Button Type="primary">Hello World!</Button>
```

View File

@ -76,9 +76,25 @@ public void ConfigureServices(IServiceCollection services)
@using AntDesign
```
然后在 Razor 模板中使用:
- 为了动态地显示弹出组件,需要在 `App.razor` 中添加一个 `<AntContainer />` 组件。
```
<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 /> <-- 在这里添加
```
- 最后就可以在`.razor`组件中引用啦!
```html
<Button Type="primary">Primary</Button>
```
```