Added a split button component

This commit is contained in:
Thorsten Sommer 2024-08-18 11:08:29 +02:00
parent ea0ead58f8
commit 77513df6cc
Signed by: tsommer
GPG Key ID: 371BBA77A02C0108
2 changed files with 88 additions and 0 deletions

View File

@ -0,0 +1,24 @@
@typeparam T
<MudButtonGroup Color="@this.Color" Variant="Variant.Filled">
@if (string.IsNullOrWhiteSpace(this.Icon))
{
<MudButton OnClick="() => this.OnClick(this.selectedValue)">
@this.SelectedValueName()
</MudButton>
}
else
{
<MudButton StartIcon="@this.Icon" OnClick="() => this.OnClick(this.selectedValue)">
@this.SelectedValueName()
</MudButton>
}
<MudMenu Icon="@Icons.Material.Filled.ArrowDropDown" Style="align-self: auto;">
@foreach(var item in this.Items)
{
<MudMenuItem OnClick="() => this.SelectItem(item)">
@this.NameFunc(item)
</MudMenuItem>
}
</MudMenu>
</MudButtonGroup>

View File

@ -0,0 +1,64 @@
using Microsoft.AspNetCore.Components;
namespace AIStudio.Components.Blocks;
public partial class SplitButton<T> : ComponentBase
{
[Parameter]
public Color Color { get; set; } = Color.Default;
[Parameter]
public string Icon { get; set; } = string.Empty;
[Parameter]
public IReadOnlyCollection<T> Items { get; set; } = [];
[Parameter]
public Func<T, string> NameFunc { get; set; } = _ => string.Empty;
[Parameter]
public T? PreselectedValue { get; set; }
[Parameter]
public Func<T?, Task> OnClick { get; set; } = _ => Task.CompletedTask;
/// <summary>
/// What happens when the user selects an item by the dropdown?
/// Immediate = true means that the OnClick event is triggered immediately
/// after the user selects an item. Immediate = false means that the OnClick
/// event is triggered only when the user clicks the button.
/// </summary>
[Parameter]
public bool Immediate { get; set; }
#region Overrides of ComponentBase
protected override async Task OnInitializedAsync()
{
if(this.PreselectedValue is not null)
this.selectedValue = this.PreselectedValue;
else
this.selectedValue = this.Items.FirstOrDefault();
await base.OnInitializedAsync();
}
#endregion
private T? selectedValue;
private string SelectedValueName()
{
if(this.selectedValue is null)
return "Select...";
return this.NameFunc(this.selectedValue!);
}
private void SelectItem(T item)
{
this.selectedValue = item;
if(this.Immediate)
this.OnClick(this.selectedValue);
}
}