menu

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;
    }
}
An unhandled error has occurred.