@page "/"
<MatButton class="add" TrailingIcon="keyboard_arrow_down" OnClick="@OnStartEdit">Click me</MatButton>
<MatDialog @bind-IsOpen="@ShowEdit">
<MatDialogTitle>Change the name</MatDialogTitle>
<MatDialogContent>
<MatSelectItem @bind-Value="value3" Items="@value3Items" TValue="ItemType">
<ItemTemplate>
<span style="color: @context.Color">@context?.Name</span>
</ItemTemplate>
</MatSelectItem>
<p>
<Input @onchange="OnItemChanged" value="@value3.Name" required />
</p>
<p>
Selected value: @(value3?.Name)
</p>
</MatDialogContent>
<MatDialogActions>
<MatButton TrailingIcon="save_outline" class="add" OnClick="@OnStopEdit">Finish</MatButton>
</MatDialogActions>
</MatDialog>
@code
{
bool ShowEdit { get; set; }
ItemType[] value3Items { get; set; } = new[] {
new ItemType("", "black"),
new ItemType("Grains", "brown"),
new ItemType("Vegetables", "green"),
new ItemType("Fruit", "orange"),
};
ItemType _value3;
ItemType value3{
get {
if (value3Items.Count() > 2 && _value3 == null) return value3Items[2];
else return _value3;
}
set => _value3 = value;
}
void OnItemChanged(ChangeEventArgs e)
{
value3.Name = e.Value?.ToString();
}
private void OnStartEdit()
{
ShowEdit = true;
}
private void OnStopEdit()
{
ShowEdit = false;
}
class ItemType
{
public string Name { get; set;}
public string Color { get; }
public ItemType(string name, string color)
{
Name = name;
Color = color;
}
}
}