Custom Checkbox

sjefvanleeuwen · sjefvanleeuwen · commit a8f70138ef64 · 2020-08-18T23:45:24.000+02:00
diff --git a/src/Blazor.AdminLte.Site.Shared/Pages/Forms/General.razor b/src/Blazor.AdminLte.Site.Shared/Pages/Forms/General.razor
@@ -7,6 +7,21 @@
 <ContentMain>
     <Card>
         <Title><CardTitle>Some simple link content</CardTitle></Title>
-        <Body>Contents</Body>
+        <Body>
+            <FormGroup>
+                @code{ 
+                        List<CustomCheckboxState> Checkboxes = new List<CustomCheckboxState>()
+                    {
+                        new CustomCheckboxState(){ Identifier = "customCheckbox1", Value="option1", Label=new MarkupString("Custom Checkbox")},
+                        new CustomCheckboxState(){ Identifier = "customCheckbox2", Value="option2", IsChecked=true, Label=new MarkupString("Custom Checkbox checked")},
+                        new CustomCheckboxState(){ Identifier = "customCheckbox3", Value="option3", IsDisabled=true, Label=new MarkupString("Custom Checkbox disabled")}
+                    };
+                }
+                @for (int i=0;i<Checkboxes.Count;i++)
+                {
+                    <CustomCheckbox @bind-State="Checkboxes[i]" />
+                }
+            </FormGroup>
+        </Body>
     </Card>
 </ContentMain>
diff --git a/src/Blazor.AdminLte/Forms/CustomCheckbox.razor b/src/Blazor.AdminLte/Forms/CustomCheckbox.razor
@@ -0,0 +1,5 @@
+﻿@namespace Blazor.AdminLte
+<div class="custom-control custom-checkbox">
+    <input class="custom-control-input" type="checkbox" id="@State.Identifier" value="@State.Value" disabled="@State.IsDisabled" checked="@State.IsChecked" @onchange="DoChange">
+    <label for="@State.Identifier" class="custom-control-label">@State.Label</label>
+</div>
diff --git a/src/Blazor.AdminLte/Forms/CustomCheckbox.razor.cs b/src/Blazor.AdminLte/Forms/CustomCheckbox.razor.cs
@@ -0,0 +1,25 @@
+﻿using Microsoft.AspNetCore.Components;
+
+namespace Blazor.AdminLte
+{
+    public partial class CustomCheckbox
+    {
+        [Parameter]
+        public CustomCheckboxState State { get; set; }
+
+        [Parameter]
+        public EventCallback<CustomCheckboxState> StateChanged { get; set; }
+
+        [Parameter]
+        public RenderFragment ChildContent { get; set; }
+
+        [Parameter]
+        public EventCallback<ChangeEventArgs> OnChange { get; set; }
+
+        private async void DoChange(ChangeEventArgs e)
+        {
+            if (OnChange.HasDelegate)
+                await OnChange.InvokeAsync(e);
+        }
+    }
+}
diff --git a/src/Blazor.AdminLte/Forms/CustomCheckboxState.cs b/src/Blazor.AdminLte/Forms/CustomCheckboxState.cs
@@ -0,0 +1,13 @@
+﻿using Microsoft.AspNetCore.Components;
+
+namespace Blazor.AdminLte
+{
+    public class CustomCheckboxState
+    {
+        public bool? IsChecked { get; set; }
+        public bool IsDisabled { get; set; }
+        public string Value { get; set; }
+        public string Identifier { get; set; }
+        public MarkupString Label { get; set; }
+    }
+}
