🦔

チェックボックスのベースクラスを作成する

2023/08/06に公開
ChkBase
div class="container">
	<div class="title">
		@Title
	</div>
	<div class="checkbox">
		<CheckboxGroup Options="@Options" @bind-Value="@ChildValue" Style="display: grid;" />
	</div>
</div>

@code{
	[Parameter]
	public CheckboxOption[] Options { get; set; }
	[Parameter]
	public string[] Value { get; set; }
	[Parameter]
	public string[] ChildValue 
	{ 
		get => Value; 
		set => ValueChanged.InvokeAsync(value); 
	}
	[Parameter]
	public EventCallback<string[]> ValueChanged { get; set; }
	[Parameter]
	public string Title { get; set; }
}
ChkPrameKey
<ChkBase 
    Options="@Source.Select(s => new CheckboxOption{Value = s.Key.ToString(), Label = s.Value}).ToArray()"
    @bind-Value ="@ChildValue"
    Title="@Title" />

@code{
    [Parameter]
    public string Title { get; set; }
    [Parameter]
    public List<int> Value { get; set; }
    [Parameter]
    public string[] ChildValue
    {
        get => Value.Select(v => v.ToString()).ToArray();
        set => ValueChanged.InvokeAsync(value.Select(s => int.Parse(s)).ToList());
    }
    [Parameter]
    public EventCallback<List<int>> ValueChanged { get; set; }
    protected Dictionary<int, string> Source = new();
}
ChkDemo
@inherits ChkParamKey
@{
    base.BuildRenderTree(__builder);
}
@code {

    protected override void OnInitialized()
    {
        Source = new Dictionary<int, string>()
        {
            {1,"相沢"},
            {2,"石黒"},
            {3,"浦川"},
        };
    }
}

Discussion