Building Real-Life Applications with Blazor WebAssembly/

...

/

Adding the Dialog Component

Adding the Dialog Component

Learn how to add the Dialog component in the Blazor WebAssembly.

We'll cover the following...

The Dialog component will be shared. Therefore, we will add it to the Shared folder. We do this as follows:

  1. Right-click the Shared folder and select “Add, Razor Component” from the menu.
  2. Name the new component Dialog.
  3. Click the “Add” button.
  4. Replace the markup with the following markup:
Press + to interact
@if (Show)
{
     <div class="dialog-container">
         <div class="dialog">
             <div class="dialog-title">Title</div>
             <div class="dialog-body">Body</div>
             <div class="dialog-buttons">
                 <button class="btn btn-dark mr-2" >
                     OK
                 </button>
                 <button class="btn btn-danger">
                     Cancel
                 </button>
             </div>
         </div>
     </div>
}
@code {
     [Parameter] public bool Show { get; set; }
}

The Show ...