mirror of
https://gitee.com/ant-design-blazor/ant-design-blazor.git
synced 2024-12-05 05:27:37 +08:00
docs: missing the setup of AntContainer (#3504)
This commit is contained in:
parent
ed0e864946
commit
cc92bc8a3a
@ -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>
|
||||
```
|
@ -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>
|
||||
```
|
||||
|
||||
```
|
Loading…
Reference in New Issue
Block a user