new ToggleInput, Fixed binding on Radio and CheckBox
This commit is contained in:
parent
31be47fb6a
commit
3a5d96fc5e
@ -2,12 +2,10 @@
|
|||||||
|
|
||||||
@inherits InputBase;
|
@inherits InputBase;
|
||||||
|
|
||||||
<div class="checkbox-group">
|
<label class="checkbox-group" for="@Id">
|
||||||
@if (Checked)
|
<input class="checkbox-input" id="@Id" name="@ParentCheckBoxGroup.Name" type="checkbox" @attributes=@InputAttributes>
|
||||||
{
|
<div class="checkbox-fill"></div>
|
||||||
<input id="@Id" name="checkbox" type="checkbox" @onchange="OnChange" @attributes=@InputAttributes checked>
|
<label for="@Id" class="checkbox-label">@Label</label>
|
||||||
} else {
|
</label>
|
||||||
<input id="@Id" name="checkbox" type="checkbox" @onchange="OnChange" @attributes=@InputAttributes>
|
|
||||||
}
|
|
||||||
<label for="@Id" class="checkbox-label">@Label</label>
|
|
||||||
</div>
|
|
||||||
|
@ -2,20 +2,41 @@
|
|||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
|
|
||||||
namespace Connected.Components;
|
namespace Connected.Components;
|
||||||
public partial class CheckBox: InputBase
|
public partial class CheckBox : InputBase
|
||||||
{
|
{
|
||||||
|
[CascadingParameter]
|
||||||
|
public CheckBoxGroup? ParentCheckBoxGroup { get; set; }
|
||||||
|
|
||||||
|
private bool _checked { get; set; }
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public bool Checked { get; set; } = false;
|
public bool? Checked
|
||||||
|
{
|
||||||
|
get => _checked;
|
||||||
|
set => _checked = (bool)value;
|
||||||
|
}
|
||||||
|
|
||||||
[Parameter, EditorRequired]
|
[Parameter, EditorRequired]
|
||||||
public string Id { get; set; }
|
public string Id { get; set; }
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public EventCallback<bool> CheckedChange { get; set; }
|
public EventCallback<bool> CheckedChanged { get; set; }
|
||||||
public async Task OnChange(ChangeEventArgs args)
|
|
||||||
|
public async Task OnChange()
|
||||||
{
|
{
|
||||||
Checked = (bool)args.Value;
|
Checked = !Checked;
|
||||||
CheckedChange.InvokeAsync(Checked);
|
CheckedChanged.InvokeAsync((bool)Checked);
|
||||||
|
}
|
||||||
|
|
||||||
|
protected override async Task OnParametersSetAsync()
|
||||||
|
{
|
||||||
|
await base.OnInitializedAsync();
|
||||||
|
if (ParentCheckBoxGroup.Disabled) Disabled = true;
|
||||||
|
if (!InputAttributes.ContainsKey("disabled"))
|
||||||
|
InputAttributes.Add("disabled", Disabled);
|
||||||
|
if (!InputAttributes.ContainsKey("checked"))
|
||||||
|
InputAttributes.Add("checked", Checked);
|
||||||
|
StateHasChanged();
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -1,9 +1,13 @@
|
|||||||
@using Connected.Models;
|
@using Connected.Models;
|
||||||
|
|
||||||
@inherits InputBase;
|
<CascadingValue Value="this">
|
||||||
|
<div>
|
||||||
<div>
|
@if (!string.IsNullOrEmpty(Name))
|
||||||
<div class="container">
|
{
|
||||||
@ChildContent
|
<h5>@Name</h5>
|
||||||
|
}
|
||||||
|
<div class="container">
|
||||||
|
@ChildContent
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</CascadingValue>
|
@ -4,7 +4,10 @@ namespace Connected.Components;
|
|||||||
public partial class CheckBoxGroup
|
public partial class CheckBoxGroup
|
||||||
{
|
{
|
||||||
[Parameter, EditorRequired]
|
[Parameter, EditorRequired]
|
||||||
public string Id { get; set; }
|
public string Name { get; set; }
|
||||||
|
|
||||||
|
[Parameter]
|
||||||
|
public bool Disabled { get; set; }
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public RenderFragment ChildContent { get; set; }
|
public RenderFragment ChildContent { get; set; }
|
||||||
|
@ -2,7 +2,8 @@
|
|||||||
|
|
||||||
@inherits InputBase;
|
@inherits InputBase;
|
||||||
|
|
||||||
<div class="radio-group">
|
<label class="radio-group" for="@Id">
|
||||||
<input id="@Id" name="@ParentRadioGroup.Name" type="radio" @onchange="OnChange" @attributes=@InputAttributes>
|
<input class="radio-input" id="@Id" name="@ParentRadioGroup.Name" type="radio" @onchange="OnChange" @attributes=@InputAttributes>
|
||||||
|
<div class="radio-fill"></div>
|
||||||
<label for="@Id" class="radio-label">@Label</label>
|
<label for="@Id" class="radio-label">@Label</label>
|
||||||
</div>
|
</label>
|
@ -2,23 +2,30 @@
|
|||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
|
|
||||||
namespace Connected.Components;
|
namespace Connected.Components;
|
||||||
public partial class Radio: InputBase
|
public partial class Radio : InputBase
|
||||||
{
|
{
|
||||||
[CascadingParameter]
|
[CascadingParameter]
|
||||||
public RadioGroup? ParentRadioGroup { get; set; }
|
public RadioGroup? ParentRadioGroup { get; set; }
|
||||||
|
|
||||||
|
private bool _checked { get; set; }
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public bool Checked { get; set; } = false;
|
public bool? Checked
|
||||||
|
{
|
||||||
|
get => _checked;
|
||||||
|
set => _checked = (bool)value;
|
||||||
|
}
|
||||||
|
|
||||||
[Parameter, EditorRequired]
|
[Parameter, EditorRequired]
|
||||||
public string Id { get; set; }
|
public string Id { get; set; }
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public EventCallback<bool> CheckedChange { get; set; }
|
public EventCallback<bool> CheckedChanged { get; set; }
|
||||||
public async Task OnChange(ChangeEventArgs args)
|
|
||||||
|
public async Task OnChange()
|
||||||
{
|
{
|
||||||
Checked = (bool)args.Value;
|
Checked = !Checked;
|
||||||
CheckedChange.InvokeAsync(Checked);
|
CheckedChanged.InvokeAsync((bool)Checked);
|
||||||
}
|
}
|
||||||
|
|
||||||
protected override async Task OnInitializedAsync()
|
protected override async Task OnInitializedAsync()
|
||||||
|
@ -1,7 +1,5 @@
|
|||||||
@using Connected.Models;
|
@using Connected.Models;
|
||||||
|
|
||||||
@inherits InputBase;
|
|
||||||
|
|
||||||
<CascadingValue Value="this">
|
<CascadingValue Value="this">
|
||||||
<div>
|
<div>
|
||||||
@if (!string.IsNullOrEmpty(Name))
|
@if (!string.IsNullOrEmpty(Name))
|
||||||
|
@ -6,7 +6,10 @@ public partial class RadioGroup
|
|||||||
[Parameter, EditorRequired]
|
[Parameter, EditorRequired]
|
||||||
public string Name { get; set; }
|
public string Name { get; set; }
|
||||||
|
|
||||||
|
[Parameter]
|
||||||
|
public bool Disabled { get; set; }
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public RenderFragment ChildContent { get; set; }
|
public RenderFragment ChildContent { get; set; }
|
||||||
|
|
||||||
}
|
}
|
17
src/Connected.Components/Components/ToggleInput.razor
Normal file
17
src/Connected.Components/Components/ToggleInput.razor
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
@using Connected.Models;
|
||||||
|
|
||||||
|
@inherits InputBase;
|
||||||
|
|
||||||
|
<label class="toggle-group" for="@Id">
|
||||||
|
<input class="toggle-input"
|
||||||
|
type="checkbox"
|
||||||
|
name="toggle"
|
||||||
|
disabled="@Disabled"
|
||||||
|
id="@Id"
|
||||||
|
checked="@Checked"
|
||||||
|
@onchange="@OnChange"
|
||||||
|
@attributes=@InputAttributes>
|
||||||
|
|
||||||
|
<div class="toggle-fill"></div>
|
||||||
|
<label for="@Id" class="toggle-label">@Label</label>
|
||||||
|
</label>
|
27
src/Connected.Components/Components/ToggleInput.razor.cs
Normal file
27
src/Connected.Components/Components/ToggleInput.razor.cs
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
using Connected.Models;
|
||||||
|
using Microsoft.AspNetCore.Components;
|
||||||
|
|
||||||
|
namespace Connected.Components;
|
||||||
|
public partial class ToggleInput: InputBase
|
||||||
|
{
|
||||||
|
private bool _checked { get; set; }
|
||||||
|
|
||||||
|
[Parameter]
|
||||||
|
public bool? Checked
|
||||||
|
{
|
||||||
|
get => _checked;
|
||||||
|
set => _checked= (bool)value;
|
||||||
|
}
|
||||||
|
|
||||||
|
[Parameter, EditorRequired]
|
||||||
|
public string Id { get; set; }
|
||||||
|
|
||||||
|
[Parameter]
|
||||||
|
public EventCallback<bool> CheckedChanged { get; set; }
|
||||||
|
|
||||||
|
public async Task OnChange()
|
||||||
|
{
|
||||||
|
Checked = !Checked;
|
||||||
|
CheckedChanged.InvokeAsync((bool)Checked);
|
||||||
|
}
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user