doc(RadioListGeneric): update sample code (#4912)

ArgoZhang · web-flow · commit eac75309649c · 2024-12-21T21:56:08.000+08:00
* doc(Safari): 更新标题栏颜色设置

* refactor: 精简代码

* refactor: 重构代码消除警告信息

* doc: 精简代码

* doc: 更新宽度

* doc: 格式化代码

* doc: 更新资源文件

* refactor: 更新示例代码
diff --git a/src/BootstrapBlazor.Server/Components/App.razor b/src/BootstrapBlazor.Server/Components/App.razor
@@ -6,6 +6,7 @@
 <html lang="en" data-bs-theme='light'>
 
 <head>
+    <meta name="theme-color" content="#712cf9">
     <meta charset="utf-8" />
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Radios.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Radios.razor.cs
@@ -3,9 +3,6 @@
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
 
-using DocumentFormat.OpenXml.Office2010.Excel;
-using DocumentFormat.OpenXml.Wordprocessing;
-
 namespace BootstrapBlazor.Server.Components.Samples;
 
 /// <summary>
@@ -58,8 +55,7 @@ private Task OnSelectedChanged(IEnumerable<SelectedItem> values, string val)
     [NotNull]
     private IEnumerable<SelectedItem<Foo>>? GenericItems { get; set; }
 
-    [NotNull]
-    private Foo? _selectedFoo = default;
+    private Foo _selectedFoo = new() { Id = 1 };
 
     /// <summary>
     /// OnInitialized 方法
@@ -80,11 +76,11 @@ protected override void OnInitialized()
             new("2", Localizer["RadiosItem2"]) { IsDisabled = true }
         };
 
-        Items = new SelectedItem[]
-        {
+        Items =
+        [
             new("1", Localizer["RadiosAdd1"]),
             new("2", Localizer["RadiosAdd2"])
-        };
+        ];
 
         IconDemoValues = new List<IconSelectedItem>()
         {
@@ -95,14 +91,13 @@ protected override void OnInitialized()
         Model = Foo.Generate(LocalizerFoo);
         FooItems = Foo.GetCompleteItems(LocalizerFoo);
 
-        GenericItems = new List<SelectedItem<Foo>>()
+        _selectedFoo.Name = LocalizerFoo["Foo.Name", "001"];
+        GenericItems = new List<SelectedItem<Foo>>
         {
-            new() { Text = Localizer["item1"], Value = new Foo() { Id = 1, Name = LocalizerFoo["Foo.Name", "001"] } },
-            new() { Text = Localizer["item2"], Value = new Foo() { Id = 2, Name = LocalizerFoo["Foo.Name", "002"] } },
-            new() { Text = Localizer["item3"], Value = new Foo() { Id = 3, Name = LocalizerFoo["Foo.Name", "003"] } },
+            new() { Text = Localizer["Item1"], Value = _selectedFoo },
+            new() { Text = Localizer["Item2"], Value = new Foo { Id = 2, Name = LocalizerFoo["Foo.Name", "002"] } },
+            new() { Text = Localizer["Item3"], Value = new Foo { Id = 3, Name = LocalizerFoo["Foo.Name", "003"] } },
         };
-
-        _selectedFoo = new Foo() { Id = 1, Name = LocalizerFoo["Foo.Name", "001"] };
     }
 
     private Task OnItemChanged(IEnumerable<SelectedItem> values, SelectedItem val)
@@ -112,10 +107,9 @@ private Task OnItemChanged(IEnumerable<SelectedItem> values, SelectedItem val)
         return Task.CompletedTask;
     }
 
-
     class IconSelectedItem : SelectedItem
     {
-        public string? Icon { get; set; }
+        public string? Icon { get; init; }
     }
 
     private AttributeItem[] GetAttributes() =>
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -2376,9 +2376,7 @@
     "StatusText2": "Not selected",
     "StatusText3": "Indeterminate",
     "Checkbox2Text": "Two-way binding",
-    "Checkbox3Text": "Handwritten labels",
-    "RadioListGenericTitle": "Generic List",
-    "RadioListGenericIntro": "Enable generic support through <code>SelectedItem&lt;TValue&gt;</code>"
+    "Checkbox3Text": "Handwritten labels"
   },
   "BootstrapBlazor.Server.Components.Samples.CheckboxLists": {
     "Title": "CheckboxList",
@@ -2390,13 +2388,13 @@
     "NormalTips3": "Get the changed item instance through the <code>onSelectedChanged</code> callback method",
     "NormalTips4": "Enable label tooltip by <code>ShowLabelTooltip=\"true\"</code>",
     "ValidateFormTitle": "Client Validation",
-    "ValidateFormIntro": "Built in validateform",
+    "ValidateFormIntro": "Built in <code>ValidateForm</code>",
     "ValidateFormTips1": "You can experience adaptive layout by changing the window size",
     "ValidateFormTips2": "In this example, the <code>Name</code> field of the binding model <code>binditem</code> is automatically changed by checking the option",
     "ValidateFormTips3": "Because it is built into the <code>ValidateForm</code> form, in this example, <code>RequiredAttribute</code> required for verification is added. When all options are cancelled, the verification result will be prompted",
     "ShowLabelTitle": "Bidirectional binding collection",
     "ShowLabelIntro": "Binding values are collections",
-    "ShowLabelTip": "Tvalue is set to <code>IEnumerable&lt;int&gt;</code> generic collection, the <Code>ValueField</Code> specified field of the bound collection must be consistent with the generic type",
+    "ShowLabelTip": "<code>TValue</code> is set to <code>IEnumerable&lt;int&gt;</code> generic collection, the <Code>ValueField</Code> specified field of the bound collection must be consistent with the generic type",
     "EnumTitle": "Bidirectional binding enumeration",
     "EnumIntro": "The binding value is enumeration",
     "EnumTip": "When <code>CheckboxList</code> binds an enumeration set, <code>Items</code> does not need to be specified, <code>Items</code> will be automatically set to all values in the enumeration. If you need to bind some values, please provide the enumeration set <code>Items</code>",
@@ -2428,7 +2426,9 @@
     "MaxSelectedCountIntro": "Control the maximum number of selectable items by setting the <code>MaxSelectedCount</code> property, and handle the logic through the <code>OnMaxSelectedCountExceed</code> callback",
     "MaxSelectedCountDesc": "When more than 2 nodes are selected, a <code>Toast</code> prompt bar will pop up",
     "OnMaxSelectedCountExceedTitle": "Maximum Info",
-    "OnMaxSelectedCountExceedContent": "You can select at most {0} items"
+    "OnMaxSelectedCountExceedContent": "You can select at most {0} items",
+    "CheckboxListGenericTitle": "Generic List",
+    "CheckboxListGenericIntro": "Enable generic support by using the <code>RadioListGeneric</code> component with <code>SelectedItem&lt;TValue&gt;</code>"
   },
   "BootstrapBlazor.Server.Components.Samples.ColorPickers": {
     "Title": "ColorPicker",
@@ -2912,7 +2912,7 @@
     "MultiSelectIsSingleLineDescription": "When there are too many candidates, the component is laid out horizontally, and a horizontal scroll bar is displayed when the mouse is hovering over the component for data scrolling.",
     "MultiSelectBindingStringTitle": "A two-way binding value string",
     "MultiSelectBindingStringIntro": "Bind a comma string-splitting string",
-    "MultiSelectBindingStringDescription": "<div>The <code>mutltiSelect</code> component data source <code>Items</code> and <b>selected values</b> the <code>SelectItemsValue</code> support bidirectional binding;In this example, the <code>SelectItemsValue</code> variable by binding bidirectionally, and chooses to change its value through the drop-down box. </div>",
+    "MultiSelectBindingStringDescription": "<div>The <code>MultiSelect</code> component data source <code>Items</code> and <b>selected values</b> the <code>SelectItemsValue</code> support bidirectional binding;In this example, the <code>SelectItemsValue</code> variable by binding bidirectionally, and chooses to change its value through the drop-down box. </div>",
     "MultiSelectBindingCollectionTitle": "A collection of bidirectional binding values",
     "MultiSelectBindingCollectionIntro": "Bind a generic <code>a collection of IEnumerable<T></code>",
     "MultiSelectBindingCollectionDescription": "In this example, the <code>SelectArrayValues</code> collection variable by binding bidirectionally, and selects to change its value through the drop-down box",
@@ -3028,7 +3028,7 @@
     "RadiosAdd1": "Beijing",
     "RadiosAdd2": "Shanghai",
     "RadioListGenericTitle": "Generic List",
-    "RadioListGenericIntro": "Enable generic support through <code>SelectedItem&lt;TValue&gt;</code>"
+    "RadioListGenericIntro": "Enable generic support by using the <code>RadioListGeneric</code> component with <code>SelectedItem&lt;TValue&gt;</code>"
   },
   "BootstrapBlazor.Server.Components.Samples.Rates": {
     "RatesTitle": "Rate",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -2388,13 +2388,13 @@
     "NormalTips3": "通过 <code>OnSelectedChanged</code> 回调方法获取改变项实例",
     "NormalTips4": "通过 <code>ShowLabelTooltip=\"true\"</code> 开启标签提示功能",
     "ValidateFormTitle": "客户端验证",
-    "ValidateFormIntro": "内置于 ValidateForm 中使用",
+    "ValidateFormIntro": "内置于 <code>ValidateForm</code> 中使用",
     "ValidateFormTips1": "可以通过改变窗口大小，体验自适应布局",
     "ValidateFormTips2": "本例中绑定模型 <code>BindItem</code> 的 <code>Name</code> 字段，通过勾选项自动更改模型数据",
     "ValidateFormTips3": "由于内置于 <code>ValidateForm</code> 表单内，本例中增加了 <code>RequiredAttribute</code> 必选要求验证，当取消所有选项后提示验证结果",
     "ShowLabelTitle": "双向绑定集合",
     "ShowLabelIntro": "绑定值为集合",
-    "ShowLabelTip": "TValue 设置为 <code>IEnumerable&lt;int&gt;</code> 泛型集合，绑定集合的 <code>ValueField</code> 指定字段必须与泛型类型一致",
+    "ShowLabelTip": "<code>TValue</code> 设置为 <code>IEnumerable&lt;int&gt;</code> 泛型集合，绑定集合的 <code>ValueField</code> 指定字段必须与泛型类型一致",
     "EnumTitle": "双向绑定枚举",
     "EnumIntro": "绑定值为枚举",
     "EnumTip": "当 <code>CheckboxList</code> 绑定一个枚举集合时，<code>Items</code> 不需要指定，<code>Items</code> 会被自动设置成枚举里面所有的值，如果需要绑定部分值时，请自行提供枚举集合 <code>Items</code>",
@@ -2428,7 +2428,7 @@
     "OnMaxSelectedCountExceedTitle": "可选最大数量提示",
     "OnMaxSelectedCountExceedContent": "最多只能选择 {0} 项",
     "CheckboxListGenericTitle": "泛型支持",
-    "CheckboxListGenericIntro": "通过 <code>SelectedItem&lt;TValue&gt;</code> 开启泛型支持"
+    "CheckboxListGenericIntro": "通过 <code>CheckboxListGeneric</code> 组件和 <code>SelectedItem&lt;TValue&gt;</code> 开启泛型支持"
   },
   "BootstrapBlazor.Server.Components.Samples.ColorPickers": {
     "Title": "ColorPicker 颜色拾取器",
@@ -2912,7 +2912,7 @@
     "MultiSelectIsSingleLineDescription": "候选项过多时，组件横向布局，鼠标悬浮组件上时显示横向滚动条进行数据滚动",
     "MultiSelectBindingStringTitle": "双向绑定值字符串",
     "MultiSelectBindingStringIntro": "绑定一个逗号字符串分割的字符串",
-    "MultiSelectBindingStringDescription": "<div><code>MutltiSelect</code> 组件数据源 <code>Items</code> 与 <b>选中值</b> <code>SelectedItemsValue</code> 均支持双向绑定；本例中通过双向绑定 <code>SelectedItemsValue</code> 变量，通过下拉框选择更改其值</div>",
+    "MultiSelectBindingStringDescription": "<div><code>MultiSelect</code> 组件数据源 <code>Items</code> 与 <b>选中值</b> <code>SelectedItemsValue</code> 均支持双向绑定；本例中通过双向绑定 <code>SelectedItemsValue</code> 变量，通过下拉框选择更改其值</div>",
     "MultiSelectBindingCollectionTitle": "双向绑定值集合",
     "MultiSelectBindingCollectionIntro": "绑定一个泛型 <code>IEnumerable<T></code> 集合",
     "MultiSelectBindingCollectionDescription": "本例中通过双向绑定 <code>SelectedArrayValues</code> 集合变量，通过下拉框选择更改其值",
@@ -3028,7 +3028,7 @@
     "RadiosAdd1": "北京",
     "RadiosAdd2": "上海",
     "RadioListGenericTitle": "泛型支持",
-    "RadioListGenericIntro": "通过 <code>SelectedItem&lt;TValue&gt;</code> 开启泛型支持"
+    "RadioListGenericIntro": "通过使用 <code>RadioListGeneric</code> 组件配合 <code>SelectedItem&lt;TValue&gt;</code> 开启泛型支持"
   },
   "BootstrapBlazor.Server.Components.Samples.Rates": {
     "RatesTitle": "Rate 评分",
diff --git a/src/BootstrapBlazor.Server/wwwroot/css/site.css b/src/BootstrapBlazor.Server/wwwroot/css/site.css
@@ -304,7 +304,7 @@ code {
 @media (min-width: 768px) {
     :root {
         --bs-header-height: 50px;
-        --bb-header-select-width: 130px;
+        --bb-header-select-width: 196px;
         --bb-header-search-margin-bottom: 0;
     }
 
diff --git a/src/BootstrapBlazor/Components/Radio/RadioListGeneric.razor.cs b/src/BootstrapBlazor/Components/Radio/RadioListGeneric.razor.cs
@@ -139,7 +139,7 @@ protected override void OnParametersSet()
     /// <summary>
     /// 点击选择框方法
     /// </summary>
-    private async Task OnClick(SelectedItem<TValue?> item)
+    private async Task OnClick(SelectedItem<TValue> item)
     {
         if (!IsDisabled)
         {
diff --git a/src/BootstrapBlazor/Components/Table/TableColumn.cs b/src/BootstrapBlazor/Components/Table/TableColumn.cs
@@ -322,7 +322,7 @@ public class TableColumn<TItem, TType> : BootstrapComponentBase, ITableColumn
         get => Template == null ? null : new RenderFragment<object>(context => builder =>
         {
             // 此处 context 为行数据
-            if (this is TableTemplateColumn<TItem> col)
+            if (this is TableTemplateColumn<TItem>)
             {
                 builder.AddContent(0, Template.Invoke(new TableColumnContext<TItem, TType?>((TItem)context, default)));
             }

Original file line number	Diff line number	Diff line change
`@@ -304,7 +304,7 @@ code {`
`304`	`304`	`@media (min-width: 768px) {`
`305`	`305`	`:root {`
`306`	`306`	`--bs-header-height: 50px;`
`307`		`- --bb-header-select-width: 130px;`
	`307`	`+ --bb-header-select-width: 196px;`
`308`	`308`	`--bb-header-search-margin-bottom: 0;`
`309`	`309`	`}`
`310`	`310`
Original file line number	Diff line number	Diff line change
`@@ -139,7 +139,7 @@ protected override void OnParametersSet()`
`139`	`139`	`/// <summary>`
`140`	`140`	`/// 点击选择框方法`
`141`	`141`	`/// </summary>`
`142`		`- private async Task OnClick(SelectedItem<TValue?> item)`
	`142`	`+ private async Task OnClick(SelectedItem<TValue> item)`
`143`	`143`	`{`
`144`	`144`	`if (!IsDisabled)`
`145`	`145`	`{`
Original file line number	Diff line number	Diff line change
`@@ -322,7 +322,7 @@ public class TableColumn<TItem, TType> : BootstrapComponentBase, ITableColumn`
`322`	`322`	`get => Template == null ? null : new RenderFragment<object>(context => builder =>`
`323`	`323`	`{`
`324`	`324`	`// 此处 context 为行数据`
`325`		`- if (this is TableTemplateColumn<TItem> col)`
	`325`	`+ if (this is TableTemplateColumn<TItem>)`
`326`	`326`	`{`
`327`	`327`	`builder.AddContent(0, Template.Invoke(new TableColumnContext<TItem, TType?>((TItem)context, default)));`
`328`	`328`	`}`