Modal components
Username
Show code
@using System.ComponentModel.DataAnnotations
<VStack>
<TextField @bind-Value="username" />
<Button OnClick="OpenModal">Open modal</Button>
</VStack>
<Modal @ref="modal">
<VStack>
<h1>A simple example</h1>
<TextField @bind-Value="username" />
</VStack>
</Modal>
@code {
private Modal modal = null!;
[Display(Name = "Username")]
private string username { get; set; } = "Username example";
private void OpenModal()
{
modal.Open();
}
}
Prompt
Show code
@using System.ComponentModel.DataAnnotations
<VStack>
<TextField @bind-Value="prompt" />
<Button OnClick="() => modal.Open(prompt)">Open modal</Button>
@if (deletedItem is not null)
{
<Banner>Successfully deleted <code>@deletedItem</code></Banner>
}
</VStack>
<DeleteModal @ref="modal" T="string" Prompt="(item) => item.Trim()" OnSubmit="OnSubmit" />
@code {
private DeleteModal<string> modal = null!;
[Display(Name = "Prompt")]
private string prompt { get; set; } = "prompt";
private string? deletedItem;
private void OnSubmit(string item)
{
deletedItem = item;
}
}