You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.0 KiB
58 lines
1.0 KiB
2 years ago
|
---
|
||
|
|
sidebar_position: 4
|
||
|
|
title: Install Blazored.Modal
|
||
|
|
---
|
||
|
|
|
||
|
|
## Using Blazored Modal
|
||
|
|
|
||
|
|
Add the `Blazored.Modal` nuget.
|
||
|
|
|
||
|
|
### Add service
|
||
|
|
|
||
|
|
```csharp title="Program.cs"
|
||
|
|
// highlight-next-line
|
||
|
|
using Blazored.Modal;
|
||
|
|
|
||
|
|
public static async Task Main(string[] args)
|
||
|
|
{
|
||
|
|
...
|
||
|
|
|
||
|
|
// highlight-next-line
|
||
|
|
builder.Services.AddBlazoredModal();
|
||
|
|
|
||
|
|
...
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### Add Imports
|
||
|
|
|
||
|
|
```cshtml title="_Imports.razor"
|
||
|
|
@using Blazored.Modal
|
||
|
|
@using Blazored.Modal.Services
|
||
|
|
```
|
||
|
|
|
||
|
|
### Add CascadingBlazoredModal component around existing Router component
|
||
|
|
|
||
|
|
```cshtml title="App.razor"
|
||
|
|
// highlight-next-line
|
||
|
|
<CascadingBlazoredModal>
|
||
|
|
<Router AppAssembly="typeof(Program).Assembly">
|
||
|
|
...
|
||
|
|
</Router>
|
||
|
|
// highlight-next-line
|
||
|
|
</CascadingBlazoredModal>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Add JavaScript & CSS references
|
||
|
|
|
||
|
|
```cshtml title="Pages/_Layout.cshtml"
|
||
|
|
<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
|
||
|
|
```
|
||
|
|
|
||
|
|
```html
|
||
|
|
<script src="_content/Blazored.Modal/blazored.modal.js"></script>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Documentation
|
||
|
|
|
||
|
|
Link to documentation [Blazored.Modal](https://github.com/Blazored/Modal).
|