listbox

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -27,6 +27,7 @@
                 <FluentNavLink Href="forminputfile" Icon="@(new Icons.Regular.Size20.ArrowUpload())" IconColor="Color.Accent">InputFile</FluentNavLink>
                 <FluentNavGroup Icon="@(new Icons.Regular.Size20.List())" Expanded="false" Title="List">
                     <FluentNavLink Href="forminputcombobox" Icon="@(new Icons.Regular.Size20.BoxCheckmark())" IconColor="Color.Accent">Combobox</FluentNavLink>
+                    <FluentNavLink Href="forminputlist" Icon="@(new Icons.Regular.Size20.List())" IconColor="Color.Accent">List</FluentNavLink>
                 </FluentNavGroup>
             </FluentNavGroup>
 

BlazorFluentUI/Components/Pages/FormInputs/FormInputCombobox.razor

@@ -76,7 +76,7 @@
                     @bind-Value="selectedEmployValue"
                     @bind-SelectedOption="selectedEmployee">
         <OptionTemplate>
-            <FluentIcon Value="@(new Icons.Regular.Size16.Person())" Slot="end" OnClick="@(() => { message = $"Icon for {context.FirstName} {context.LastName} selected."; })"/>
+            <FluentIcon Value="@(new Icons.Regular.Size16.Person())" Slot="end" OnClick="@(() => message = $"Icon for {context.FirstName} {context.LastName} selected.")" />
             @context.FirstName (@context.LastName)
         </OptionTemplate>
     </FluentCombobox>

BlazorFluentUI/Components/Pages/FormInputs/FormInputList.razor

@@ -0,0 +1,135 @@
+@page "/forminputlist"
+
+@inject EmployeeService employeeService;
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">Listbox</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<FluentLabel Typo="Typography.Body">
+    The <code>FluentListbox</code> wrap a web component of a <code>listbox</code>.
+</FluentLabel>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Manual Example</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentListbox TOption="string" ValueChanged="@(e => manualListboxValue = e)">
+        <FluentOption>This option has no value</FluentOption>
+        <FluentOption Value="Item 1" Disabled="true">This option is disabled</FluentOption>
+        <FluentOption Value="Item 2">This option has a value</FluentOption>
+        <FluentOption Value="Item 3">
+            <FluentIcon Value="@(new Icons.Regular.Size16.Folder())" Slot="start" />
+            This option has an <b>icon</b>
+        </FluentOption>
+        <FluentOption Value="Item 4" Selected="true">
+            <div style="display:flex; flex-direction:row">
+                <img class="me-2" style="width:20px" src="images/korean_flag_64.png" />This option is selected by default
+            </div>
+        </FluentOption>
+    </FluentListbox>
+
+    <p><b>Selected</b>: @manualListboxValue</p>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentListbox TOption="Employee"
+                   Label="Select a employee"
+                   Items="@employeeService.GetFixedEmployeeData().Where(e => e.ID <= 10).ToList()"
+                   Id="employee-listbox"
+                   Height="150px"
+                   OptionValue="@(e => e.ID.ToString())"
+                   OptionText="@(e => $"{e.LastName}, {e.FirstName}")"
+                   @bind-Value="defaultSelectedValue"
+                   @bind-SelectedOption="defaultSelectedItem"/>
+    <p>
+        <b>Selected value</b>: @defaultSelectedValue<br/>
+        <b>Selected item</b>: @defaultSelectedItem?.ToString();
+    </p>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">From a list of <code>Option&lt;T&gt;</code></FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <h4 class="mt-2">From <code>Option&lt;string&gt</code> items</h4>
+    <FluentListbox Items="@stringOptions"
+                    OptionText="@(i => i.Text)"
+                    OptionValue="@(i => i.Value)"
+                    OptionSelected="@(i => i.Selected)"
+                    @bind-SelectedOption="selectedStringOption"
+                    @bind-Value="stringValue"/>
+    <p>
+        Selected Value: @stringValue<br />
+        <strong>Selected Item</strong><br />
+        Value: @selectedStringOption?.Value (Type: @(selectedStringOption?.GetType())) <br />
+        Text: @selectedStringOption?.Text <br />
+    </p>
+
+    <h4 class="mt-2">From <code>Option&lt;int&gt</code> items</h4>
+    <FluentListbox Items="@intOptions"
+                    OptionText="@(i => i.Text)"
+                    OptionValue="@(i => i.Value.ToString())"
+                    OptionSelected="@(i => i.Selected)"
+                    OptionDisabled="@(i => i.Disabled)"
+                    @bind-SelectedOption="selectedIntOption"
+                    @bind-Value="intValue" />
+    <p>
+        Selected Value: @intValue<br />
+        <strong>Selected Item</strong><br />
+        Value: @selectedIntOption?.Value (Type: @(selectedIntOption?.GetType())) <br />
+        Text: @selectedIntOption?.Text <br />
+    </p>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Option template</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentListbox Items="@employeeService.GetFixedEmployeeData()" Height="300px"
+                    OptionValue="@(e => e.ID.ToString())"
+                    @bind-Value="selectedEmployValue"
+                    @bind-SelectedOption="selectedEmployee">
+        <OptionTemplate>
+            <FluentIcon Value="@(new Icons.Regular.Size16.Person())" Slot="end" OnClick="@(() => message = $"Icon for {context.FirstName} {context.LastName} selected.")" />
+            @context.FirstName (@context.LastName)
+        </OptionTemplate>
+    </FluentListbox>
+    <p>
+        <strong>Selected option</strong>: @selectedEmployee?.FirstName @selectedEmployee?.LastName
+        @if (selectedEmployee != null && selectedEmployee.BirthDate != null)
+        {
+            <span>
+                (@selectedEmployee.BirthDate.ToString("yyyy-MM-dd"))
+            </span>
+        }
+        <br />
+        <strong>Selected value</strong>: @selectedEmployValue <br />
+        <strong>Message</strong>: @message;
+    </p>
+</FluentCard>
+
+@code {
+    string? manualListboxValue;
+
+    Employee? defaultSelectedItem;
+    string? defaultSelectedValue;
+
+    Option<string> selectedStringOption = default;
+    string? stringValue;
+    Option<int> selectedIntOption = default;
+    string? intValue;
+
+    List<Option<string>> stringOptions = new()
+    {
+        { new Option<string> { Value = "1", Text = "One" } },
+        { new Option<string> { Value = "2", Text = "Two", Selected = true } },
+        { new Option<string> { Value = "3", Text = "Three" } },
+    };
+
+    List<Option<int>> intOptions = new()
+    {
+        { new Option<int> { Value = 3, Text = "1", Disabled = true } },
+        { new Option<int> { Value = 2, Text = "2" } },
+        { new Option<int> { Value = 1, Text = "3" } },
+    };
+
+    Employee selectedEmployee = default!;
+    string? selectedEmployValue;
+    string? message;
+}