Check PR: Add public change handler to checkbox #576

SamProf · Jun 13, 2020 · 67acd6f · 67acd6f
1 parent 2f83343
commit 67acd6f
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 33 deletions.
diff --git a/src/MatBlazor.Demo.ServerApp/Properties/launchSettings.json b/src/MatBlazor.Demo.ServerApp/Properties/launchSettings.json
@@ -11,7 +11,7 @@
     "IIS Express": {
       "commandName": "IISExpress",
       "launchBrowser": true,
-      "launchUrl": "Autocomplete",
+      "launchUrl": "Test",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }

diff --git a/src/MatBlazor.Demo/Pages/DemoTestPage.razor b/src/MatBlazor.Demo/Pages/DemoTestPage.razor
@@ -4,42 +4,45 @@
 @inject IJSRuntime JsRuntime;
 @inject DemoUserService service;
 
+<MatH4>Source</MatH4>
+<MatList>
+    @foreach (var item in items)
+    {
+        <MatListItem>
+            <MatCheckbox TValue="bool" Value="@item.IsSelected" ValueChanged="@(value=>OnItemSelected(item, value))" Label="@item.Name"></MatCheckbox>
+        </MatListItem>
+    }
+</MatList>
 
 
-<h1>Selected Tab: @service.ActiveTabIndex</h1>
+<MatH4>Result</MatH4>
+@foreach (var item in items)
+{
+    <div>@item.Name - @item.IsSelected</div>
+}
 
-<MatTabGroup @bind-ActiveIndex="@service.ActiveTabIndex">
-    <MatTab Label="First">
-        First Content
-    </MatTab>
-    <MatTab Label="Second">
-        Second Content
-    </MatTab>
-    <MatTab>
-        <LabelContent>
-            Third <MatIcon Icon="@MatIconNames.Close"></MatIcon>
-        </LabelContent>
-        <ChildContent>
-            Third Content
-        </ChildContent>
-    </MatTab>
+@code
+{
+    void OnItemSelected(ItemClass item, bool value)
+    {
+        item.IsSelected = value;
+        // here you can dot something
+    }
+
 
-</MatTabGroup>
+    ItemClass[] items = Enumerable.Range(1, 10)
+        .Select(i => new ItemClass($"Item {i}", i % 2 == 0))
+        .ToArray();
 
+    class ItemClass
+    {
+        public string Name { get; set; }
+        public bool IsSelected { get; set; }
 
-@code
-{
-    // int activeTab = 0;
-    //
-    // int ActiveTab
-    // {
-    //     get
-    //     {
-    //         return activeTab;
-    //     }
-    //     set
-    //     {
-    //         activeTab = value;
-    //     }
-    // }
+        public ItemClass(string name, bool isSelected)
+        {
+            Name = name;
+            IsSelected = isSelected;
+        }
+    }
 }