mirror of
https://github.com/MindWorkAI/AI-Studio.git
synced 2025-04-28 16:59:47 +00:00
Added a split button component
This commit is contained in:
parent
ea0ead58f8
commit
77513df6cc
24
app/MindWork AI Studio/Components/Blocks/SplitButton.razor
Normal file
24
app/MindWork AI Studio/Components/Blocks/SplitButton.razor
Normal 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>
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user