From 3a171e100f9129135b293a8cfcf894a25740ff36 Mon Sep 17 00:00:00 2001 From: Peace Date: Tue, 9 Jul 2024 12:03:01 +0900 Subject: [PATCH] listbox --- .../Components/Layout/NavMenu.razor | 1 + .../Pages/FormInputs/FormInputCombobox.razor | 2 +- .../Pages/FormInputs/FormInputList.razor | 135 ++++++++++++++++++ .../wwwroot/images/korean_flag_64.png | Bin 0 -> 1754 bytes 4 files changed, 137 insertions(+), 1 deletion(-) create mode 100644 BlazorFluentUI/Components/Pages/FormInputs/FormInputList.razor create mode 100644 BlazorFluentUI/wwwroot/images/korean_flag_64.png diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor index 6112cd7..e04c768 100644 --- a/BlazorFluentUI/Components/Layout/NavMenu.razor +++ b/BlazorFluentUI/Components/Layout/NavMenu.razor @@ -27,6 +27,7 @@ InputFile Combobox + List diff --git a/BlazorFluentUI/Components/Pages/FormInputs/FormInputCombobox.razor b/BlazorFluentUI/Components/Pages/FormInputs/FormInputCombobox.razor index 2d3d686..afd6ca2 100644 --- a/BlazorFluentUI/Components/Pages/FormInputs/FormInputCombobox.razor +++ b/BlazorFluentUI/Components/Pages/FormInputs/FormInputCombobox.razor @@ -76,7 +76,7 @@ @bind-Value="selectedEmployValue" @bind-SelectedOption="selectedEmployee"> - + @context.FirstName (@context.LastName) diff --git a/BlazorFluentUI/Components/Pages/FormInputs/FormInputList.razor b/BlazorFluentUI/Components/Pages/FormInputs/FormInputList.razor new file mode 100644 index 0000000..392e4d8 --- /dev/null +++ b/BlazorFluentUI/Components/Pages/FormInputs/FormInputList.razor @@ -0,0 +1,135 @@ +@page "/forminputlist" + +@inject EmployeeService employeeService; + +@rendermode RenderMode.InteractiveServer + +Listbox + + + The FluentListbox wrap a web component of a listbox. + + +Manual Example + + + This option has no value + This option is disabled + This option has a value + + + This option has an icon + + +
+ This option is selected by default +
+ + + +

Selected: @manualListboxValue

+ + +Default Example + + +

+ Selected value: @defaultSelectedValue
+ Selected item: @defaultSelectedItem?.ToString(); +

+ + +From a list of Option<T> + +

From Option<string> items

+ +

+ Selected Value: @stringValue
+ Selected Item
+ Value: @selectedStringOption?.Value (Type: @(selectedStringOption?.GetType()))
+ Text: @selectedStringOption?.Text
+

+ +

From Option<int> items

+ +

+ Selected Value: @intValue
+ Selected Item
+ Value: @selectedIntOption?.Value (Type: @(selectedIntOption?.GetType()))
+ Text: @selectedIntOption?.Text
+

+ + +Option template + + + + + @context.FirstName (@context.LastName) + + +

+ Selected option: @selectedEmployee?.FirstName @selectedEmployee?.LastName + @if (selectedEmployee != null && selectedEmployee.BirthDate != null) + { + + (@selectedEmployee.BirthDate.ToString("yyyy-MM-dd")) + + } +
+ Selected value: @selectedEmployValue
+ Message: @message; +

+ + +@code { + string? manualListboxValue; + + Employee? defaultSelectedItem; + string? defaultSelectedValue; + + Option selectedStringOption = default; + string? stringValue; + Option selectedIntOption = default; + string? intValue; + + List> stringOptions = new() + { + { new Option { Value = "1", Text = "One" } }, + { new Option { Value = "2", Text = "Two", Selected = true } }, + { new Option { Value = "3", Text = "Three" } }, + }; + + List> intOptions = new() + { + { new Option { Value = 3, Text = "1", Disabled = true } }, + { new Option { Value = 2, Text = "2" } }, + { new Option { Value = 1, Text = "3" } }, + }; + + Employee selectedEmployee = default!; + string? selectedEmployValue; + string? message; +} diff --git a/BlazorFluentUI/wwwroot/images/korean_flag_64.png b/BlazorFluentUI/wwwroot/images/korean_flag_64.png new file mode 100644 index 0000000000000000000000000000000000000000..977ee376fb1a4d1a8e5a866ac8b0cfe01a108942 GIT binary patch literal 1754 zcmV<01||84P)00006bW%=J00962 z00AWfbbtT=29HTZK~#9!?OA(FlUEeKpjifG$OIGxAvkL(SSSjT=pMw3Kcuh;MIMSw z)F4O%s!Z{P$+E;bo$`kl761!?1;7Ge0gM~K@CUe903RrT!NEb} z>7-VxjSe6zEG!@(K%>zxu6=NDa8OW?aRD4Zew+{z8X8(!T6*Nj5v^7`e!X=%U3z-@ z$&)9eqM{%?D=W)b03JMeU}tCN;NZ~F(P3|IKXvNV?(XiszP|Bjf9uw*YuBzptgWqW zdwaXHv$M6e^^F@hi~?ZAiWRU>Sy|co_3Ocul$5Mlvj#AFdV1bY``fo~L+^-)h|0=J z2!sc!tE<7Jrlv9vps1(_qSvlnTV7sHnTm=EFoA)ADwXQ3kL>d0%OM2u6CWQB=Gd`g zkdHtGBqjmS;F&RFMq68(qoX6@2kv%qa)P_>+_^JqaBH=ir_Vt;jb;qV5Ib$!w5Fye z2!uoK-Mh!<^DQkcA(=4%Gf6} zw5YMM5iTA(czSmptT*M!OkEl+gd>t{l1se_w`a@G!@5^~`1tW-#LV>R(`h0?P~mlp z7cYkGm$Ut#JR!T9g2=c=I+=A42DU9`Wfa2bKt-Mc!tR= zgbG3?ljY~UlAUg%v5xM4awJKuFRdcN{PnW6Iq@CX0~){9z&d(|lgtC-bvyzRa-ot(dZ~)m$Lw;3RN6 zBQ{Mu0JT=<6SA-9V^8R0s6E_*=gG6aar8(u@k$}y+pIj3m(7VhHN{&#iHC%%8yuQo z08gH)tVDY^+KD>MTn%jRamjpM`0Q}vvx|7|AYR+ZzZi&5DpwF+Z7yte{A%dYlZgjl zyL69*K$30!#T7HRiyRNc45*poe#Ojnt3x1JxRa{>G66%NQ&{_~&ozHfG=L$E)-CiP z@!0aI=jNUEqFT!ZP#rL&Rz6YAp{B4m2pa2=_jU`{jdh;lVU=p)4{_M`T*6O+PGsQ@ zTcJeg8sp{`%bA}%vh6A1Id5a>cd7417Rozy2>_^O6b4A&@P+`m@$!P2cMSknSW;5b z&6_u0e)wFe{%qMkGH)|9ds7l5^OpXodiu&mhC(_qF%fsAQ2?Nem&@h3xw(Xp@bGZG zZwt<}5myPBzx9o@U$B+9B;`~n^n{=gf^ZaYc+t?%5W@ga+0vE(Z6p{J@p>B)e~}Vy z0x-N*du)sQsYLJRw1z|DK|8**v^2&5picDl^=)WqKrM|z8Wk@X^icQj-+#5NA5Ppa zCGdk_^jN}I{G_-&#TuUG4lxr#wDkr6XfG5BQR|}gH4G%Wp1x3Jl{JeuXS)RLxBdDD5HDz7@TRO^OXQE9 z4H)i6M~`lXcJW?bUKl!or{e;~&cNNfcj4BVGiUbp_MSU;Zq=$)EiEm2fn>PUgPKQA zlprvp?dk9D$Dj$bnYy|@J9jRJ!$GcN3;=B`VHLEhILDO1v7^n+*v-e- zO%nBFK|z5;A^~&s=+T;*8iYQEPR!o}G?0)bqNAfJ1DnD77^J=RSPr%i2?>GWArKQT z%Iw~~+b97z_@NV_m;~y{oH>4k~F1LOR04(pWb!5(O+285xP( zid2o;jgjFlvJJZJb?eqaIFg=mYavX){rvp&Zc0XAh(scPe}AJFa{~hdbl_o(g%rg8 w#l!-5XN&!(o&~@HU;(fISO6>l761$2A9tBO{Y|v>E&u=k07*qoM6N<$f-m7XCIA2c literal 0 HcmV?d00001