!41 doc: 新增补充文档

Merge pull request !41 from 浪迹天涯/dev-doc

src/BootstrapBlazor.WebConsole/Pages/Alerts.razor.cs

@@ -53,6 +53,13 @@ namespace BootstrapBlazor.WebConsole.Pages
                 DefaultValue = "Primary"
             },
             new AttributeItem() {
+                Name = "Icon",
+                Description = "图标",
+                Type = "string",
+                ValueList = " — ",
+                DefaultValue = " — "
+            },
+             new AttributeItem() {
                 Name = "Class",
                 Description = "样式",
                 Type = "string",

src/BootstrapBlazor.WebConsole/Pages/Buttons.razor.cs

@@ -59,6 +59,13 @@ namespace BootstrapBlazor.WebConsole.Pages
                 ValueList = "None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link",
                 DefaultValue = "Primary"
             },
+            new AttributeItem() {
+                Name = "Size",
+                Description = "尺寸",
+                Type = "Size",
+                ValueList = "None / ExtraSmall / Small / Medium / Large / ExtraLarge",
+                DefaultValue = "None"
+            },
             new AttributeItem() {
                 Name = "Class",
                 Description = "样式",
@@ -88,19 +95,19 @@ namespace BootstrapBlazor.WebConsole.Pages
                 DefaultValue = "false"
             },
             new AttributeItem() {
-                Name = "IsOutlin",
+                Name = "IsOutline",
                 Description = "是否边框",
                 Type = "boolean",
                 ValueList = " — ",
                 DefaultValue = "false"
             },
-            new AttributeItem() {
-                Name = "Size",
-                Description = "尺寸",
-                Type = "Size",
-                ValueList = "None / ExtraSmall / Small / Medium / Large / ExtraLarge",
-                DefaultValue = "None"
-            }
+             new AttributeItem() {
+                Name = "IsTriggerValidate",
+                Description = "是否触发客户端验证",
+                Type = "boolean",
+                ValueList = " — ",
+                DefaultValue = "true"
+            },
         };
     }
 }

src/BootstrapBlazor.WebConsole/Pages/Carousels.razor

@@ -19,3 +19,5 @@
         </div>
     </div>
 </Block>
+
+<AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.WebConsole/Pages/Carousels.razor.cs

@@ -1,3 +1,4 @@
+using BootstrapBlazor.WebConsole.Common;
 using System.Collections.Generic;
 
 namespace BootstrapBlazor.WebConsole.Pages
@@ -13,5 +14,35 @@ namespace BootstrapBlazor.WebConsole.Pages
             "images/Pic1.jpg",
             "images/Pic2.jpg"
         };
+
+        /// <summary>
+        /// 获得属性方法
+        /// </summary>
+        /// <returns></returns>
+        protected IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
+        {
+            // TODO: 移动到数据库中
+            new AttributeItem() {
+                Name = "Images",
+                Description = "Images 集合",
+                Type = "IEnumerable<string>",
+                ValueList = "—",
+                DefaultValue = "—"
+            },
+            new AttributeItem() {
+                Name = "Width",
+                Description = "设置图片宽度",
+                Type = "int",
+                ValueList = " — ",
+                DefaultValue = "—"
+            },
+            new AttributeItem() {
+                Name = "IsFade",
+                Description = "是否淡入淡出",
+                Type = "boolean",
+                ValueList = " — ",
+                DefaultValue = "false"
+            },
+        };
     }
-}
+}

src/BootstrapBlazor.WebConsole/Pages/Checkboxs.razor

@@ -20,7 +20,6 @@
     <Logger @ref="Trace" class="mt-3" />
 </Block>
 
-
 <Block Title="禁用复选框" Introduction="复选框不可用状态" CodeFile="checkbox.2.txt">
     <div class="form-inline">
         <div class="row">
@@ -39,7 +38,7 @@
         </div>
     </div>
 </Block>
- 
+
 <Block Title="Label 文字" Introduction="复选框显示文字" CodeFile="checkbox.3.txt">
     <div class="form-inline">
         <div class="row">
@@ -79,3 +78,5 @@
 </Block>
 
 <AttributeTable Items="@GetAttributes()" />
+
+<EventTable Items="@GetEvents()" />

src/BootstrapBlazor.WebConsole/Pages/Checkboxs.razor.cs

@@ -14,6 +14,7 @@ namespace BootstrapBlazor.WebConsole.Pages
         /// 
         /// </summary>
         protected Logger? Trace { get; set; }
+
         /// <summary>
         /// 
         /// </summary>
@@ -74,8 +75,36 @@ namespace BootstrapBlazor.WebConsole.Pages
                     Type = "CheckboxState",
                     ValueList = "Mixed / Checked / UnChecked",
                     DefaultValue = "text"
-                }
+                },
+                new AttributeItem(){
+                    Name = "IsDisabled",
+                    Description = "是否禁用",
+                    Type = "boolean",
+                    ValueList = " — ",
+                    DefaultValue = "false"
+                },
+                new AttributeItem(){
+                    Name = "DisplayText",
+                    Description = "显示文字",
+                    Type = "string",
+                    ValueList = " — ",
+                    DefaultValue = "—"
+                },
             };
         }
+
+        /// <summary>
+        /// 获得事件方法
+        /// </summary>
+        /// <returns></returns>
+        protected IEnumerable<EventItem> GetEvents() => new EventItem[]
+        {
+            new EventItem()
+            {
+                Name = "OnStateChanged",
+                Description="选择框状态改变时回调此方法",
+                Type ="Action<CheckboxState, TItem>"
+            }
+        };
     }
 }

src/BootstrapBlazor.WebConsole/Pages/Collapses.razor.cs

@@ -39,6 +39,13 @@ namespace BootstrapBlazor.WebConsole.Pages
                 ValueList = "None / Active / Primary / Secondary / Success / Danger / Warning / Info / Light / Dark / Link",
                 DefaultValue = "Primary"
             },
+            new AttributeItem() {
+                Name = "Size",
+                Description = "尺寸",
+                Type = "Size",
+                ValueList = "None / ExtraSmall / Small / Medium / Large / ExtraLarge",
+                DefaultValue = "None"
+            },
             new AttributeItem() {
                 Name = "Class",
                 Description = "样式",
@@ -60,27 +67,6 @@ namespace BootstrapBlazor.WebConsole.Pages
                 ValueList = " — ",
                 DefaultValue = " — "
             },
-            new AttributeItem() {
-                Name = "IsDisabled",
-                Description = "是否禁用",
-                Type = "boolean",
-                ValueList = " — ",
-                DefaultValue = "false"
-            },
-             new AttributeItem() {
-                Name = "IsExpanded",
-                Description = "是否展开",
-                Type = "boolean",
-                ValueList = " — ",
-                DefaultValue = "false"
-            },
-            new AttributeItem() {
-                Name = "Size",
-                Description = "尺寸",
-                Type = "Size",
-                ValueList = "None / ExtraSmall / Small / Medium / Large / ExtraLarge",
-                DefaultValue = "None"
-            },
             new AttributeItem() {
                 Name = "CollapsedText",
                 Description = "折叠后显示的文字",
@@ -94,7 +80,21 @@ namespace BootstrapBlazor.WebConsole.Pages
                 Type = "string",
                 ValueList = "",
                 DefaultValue = "折叠"
-            }
+            },
+            new AttributeItem() {
+                Name = "IsDisabled",
+                Description = "是否禁用",
+                Type = "boolean",
+                ValueList = " — ",
+                DefaultValue = "false"
+            },
+             new AttributeItem() {
+                Name = "IsCollapsed",
+                Description = "是否收缩折叠面板",
+                Type = "boolean",
+                ValueList = " — ",
+                DefaultValue = "true"
+            },
         };
     }
 }

src/BootstrapBlazor.WebConsole/Pages/Dropdowns.razor

@@ -50,3 +50,5 @@
 </Block>
 
 <AttributeTable Items="@GetAttributes()" />
+
+<EventTable Items="@GetEvents()" />

src/BootstrapBlazor.WebConsole/Pages/Dropdowns.razor.cs

@@ -78,10 +78,10 @@ namespace BootstrapBlazor.WebConsole.Pages
             },
             new AttributeItem() {
                 Name = "Size",
-                Description = "尺寸大小定义",
+                Description = "尺寸",
                 Type = "Size",
-                ValueList = "true / false ",
-                DefaultValue = " false "
+                ValueList = "None / ExtraSmall / Small / Medium / Large / ExtraLarge",
+                DefaultValue = "None"
             },
             new AttributeItem() {
                 Name = "Direction",
@@ -104,13 +104,20 @@ namespace BootstrapBlazor.WebConsole.Pages
                 ValueList = "dropdown-menu-right / dropdown-menu-right / dropdown-menu-{lg | md | sm }-{right | left}",
                 DefaultValue = " - "
             },
-            new AttributeItem() {
-                Name = "OnSelectedItemChanged",
-                Description = "下拉框值发生改变时触发",
-                Type = " - ",
-                ValueList = " - ",
-                DefaultValue = " - "
-            },
         };
+
+        /// <summary>
+        /// 获得事件方法
+        /// </summary>
+        /// <returns></returns>
+        protected IEnumerable<EventItem> GetEvents() => new EventItem[]
+        {
+            new EventItem()
+            {
+                Name = "OnSelectedItemChanged",
+                Description="下拉框值发生改变时触发",
+                Type ="EventCallback<SelectedItem>"
+            }
+       };
     }
 }

src/BootstrapBlazor.WebConsole/Pages/Inputs.razor

@@ -84,6 +84,6 @@
                 ValueList = " — ",
                 DefaultValue = " — "
             }
-            };
+        };
     }
 }

src/BootstrapBlazor.WebConsole/Pages/Modals.razor.cs

@@ -57,21 +57,69 @@ namespace BootstrapBlazor.WebConsole.Pages
         {
             return new AttributeItem[]
             {
-                new AttributeItem()
-                {
-                    Name = "type",
-                    Description = "控件类型",
-                    Type = "string",
-                    ValueList = "text / number / email / url",
-                    DefaultValue = "text"
-                },
                 new AttributeItem() {
-                    Name = "ChildContent",
-                    Description = "验证控件",
+                    Name = "ModalBody",
+                    Description = "ModalBody 代码块",
                     Type = "RenderFragment",
                     ValueList = " — ",
                     DefaultValue = " — "
-                }
+                },
+                new AttributeItem() {
+                    Name = "ModalFooter",
+                    Description = "Footer 代码块",
+                    Type = "RenderFragment",
+                    ValueList = " — ",
+                    DefaultValue = " — "
+                },
+                new AttributeItem() {
+                    Name = "Title",
+                    Description = "弹窗标题",
+                    Type = "string",
+                    ValueList = " — ",
+                    DefaultValue = " 未设置 "
+                },
+                new AttributeItem() {
+                    Name = "Size",
+                    Description = "尺寸",
+                    Type = "Size",
+                    ValueList = "None / ExtraSmall / Small / Medium / Large / ExtraLarge",
+                    DefaultValue = "None"
+                },
+                new AttributeItem() {
+                    Name = "IsCentered",
+                    Description = "是否垂直居中",
+                    Type = "boolean",
+                    ValueList = " — ",
+                    DefaultValue = "true"
+                },
+                new AttributeItem() {
+                    Name = "IsBackdrop",
+                    Description = "是否后台关闭弹窗",
+                    Type = "boolean",
+                    ValueList = " — ",
+                    DefaultValue = "false"
+                },
+                new AttributeItem() {
+                    Name = "IsScrolling",
+                    Description = "是否弹窗正文超长时滚动",
+                    Type = "boolean",
+                    ValueList = " — ",
+                    DefaultValue = "false"
+                },
+                new AttributeItem() {
+                    Name = "ShowCloseButton",
+                    Description = "是否显示关闭按钮",
+                    Type = "boolean",
+                    ValueList = " — ",
+                    DefaultValue = "true"
+                },
+                new AttributeItem() {
+                    Name = "ShowFooter",
+                    Description = "是否显示 Footer",
+                    Type = "boolean",
+                    ValueList = " — ",
+                    DefaultValue = "true"
+                },
             };
         }
     }

src/BootstrapBlazor.WebConsole/Pages/Paginations.razor

@@ -35,4 +35,6 @@
     </div>
 </Block>
 
-<AttributeTable Items="@GetAttributes()" />
+<AttributeTable Items="@GetAttributes()" />
+
+<EventTable Items="@GetEvents()" />

src/BootstrapBlazor.WebConsole/Pages/Paginations.razor.cs

@@ -30,18 +30,59 @@ namespace BootstrapBlazor.WebConsole.Pages
         protected IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
         {
             new AttributeItem() {
-                Name = "Total",
-                Description = "分页总页数",
+                Name = "TotalCount",
+                Description = "数据总数",
+                Type = "int",
+                ValueList = " — ",
+                DefaultValue = "—"
+            },
+            new AttributeItem() {
+                Name = "PageIndex",
+                Description = "当前页码",
                 Type = "int",
                 ValueList = " — ",
                 DefaultValue = "1"
             },
             new AttributeItem() {
-                Name = "CurrentPage",
-                Description = "当前页",
+                Name = "PageItems",
+                Description = "每页显示数据数量",
                 Type = "int",
                 ValueList = " — ",
-                DefaultValue = "1"
+                DefaultValue = "—"
+            },
+            new AttributeItem() {
+                Name = "ShowPaginationInfo",
+                Description = "是否显示分页数据汇总信息",
+                Type = "boolean",
+                ValueList = " — ",
+                DefaultValue = "true"
+            },
+            new AttributeItem() {
+                Name = "PageItemsSource",
+                Description = "每页显示数据数量的外部数据源",
+                Type = "IEnumerable<int>",
+                ValueList = " — ",
+                DefaultValue = "—"
+            },
+        };
+
+        /// <summary>
+        /// 获得事件方法
+        /// </summary>
+        /// <returns></returns>
+        protected IEnumerable<EventItem> GetEvents() => new EventItem[]
+        {
+            new EventItem()
+            {
+                Name = "OnPageClick",
+                Description="第一个参数是当前页码，第二个参数是当前每页设置显示的数据项数量",
+                Type ="Action<int, int>"
+            },
+            new EventItem()
+            {
+                Name = "OnPageItemsChanged",
+                Description="点击设置每页显示数据数量时回调方法",
+                Type ="Action<int>"
             }
         };
     }

src/BootstrapBlazor.WebConsole/Pages/Radios.razor

@@ -54,3 +54,5 @@
 </Block>
 
 <AttributeTable Items="@GetAttributes()" />
+
+<EventTable Items="@GetEvents()" />

src/BootstrapBlazor.WebConsole/Pages/Radios.razor.cs

@@ -61,15 +61,49 @@ namespace BootstrapBlazor.WebConsole.Pages
         {
             return new AttributeItem[]
             {
-                new AttributeItem()
-                {
+                new AttributeItem(){
                     Name = "State",
                     Description = "控件类型",
                     Type = "CheckboxState",
-                    ValueList = "Mixed / Checked / UnChecked",
+                    ValueList = " Checked / UnChecked",
                     DefaultValue = "text"
-                }
+                },
+                new AttributeItem(){
+                    Name = "IsDisabled",
+                    Description = "是否禁用",
+                    Type = "boolean",
+                    ValueList = " — ",
+                    DefaultValue = "false"
+                },
+                new AttributeItem(){
+                    Name = "DisplayText",
+                    Description = "显示文字",
+                    Type = "string",
+                    ValueList = " — ",
+                    DefaultValue = "—"
+                },
+                new AttributeItem(){
+                    Name = "Items",
+                    Description = "绑定数据源",
+                    Type = "IEnumerable<TItem>",
+                    ValueList = " — ",
+                    DefaultValue = "—"
+                },
             };
         }
+
+        /// <summary>
+        /// 获得事件方法
+        /// </summary>
+        /// <returns></returns>
+        protected IEnumerable<EventItem> GetEvents() => new EventItem[]
+        {
+            new EventItem()
+            {
+                Name = "OnStateChanged",
+                Description="选择框状态改变时回调此方法",
+                Type ="Action<CheckboxState, TItem>"
+            }
+        };
     }
 }

src/BootstrapBlazor.WebConsole/Pages/Selects.razor.cs

@@ -109,8 +109,8 @@ namespace BootstrapBlazor.WebConsole.Pages
             new AttributeItem() {
                 Name = "Items",
                 Description = "数据集合",
-                Type = "Color",
-                ValueList = "IEnumerable<SelectedItem>",
+                Type = "IEnumerable<SelectedItem>",
+                ValueList = "—",
                 DefaultValue = " — "
             }
         };

src/BootstrapBlazor.WebConsole/Pages/Sliders.razor

@@ -18,3 +18,7 @@
         </div>
     </div>
 </Block>
+
+<AttributeTable Items="@GetAttributes()" />
+
+<EventTable Items="@GetEvents()" />

src/BootstrapBlazor.WebConsole/Pages/Sliders.razor.cs

@@ -1,4 +1,7 @@
-namespace BootstrapBlazor.WebConsole.Pages
+using BootstrapBlazor.WebConsole.Common;
+using System.Collections.Generic;
+
+namespace BootstrapBlazor.WebConsole.Pages
 {
     /// <summary>
     /// 
@@ -6,5 +9,49 @@
     public partial class Sliders
     {
         private int BindValue { get; set; } = 50;
+
+        /// <summary>
+        /// 获得属性方法
+        /// </summary>
+        /// <returns></returns>
+        protected IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
+        {
+            // TODO: 移动到数据库中
+            new AttributeItem() {
+                Name = "Value",
+                Description = "组件当前值",
+                Type = "int",
+                ValueList = "—",
+                DefaultValue = "—"
+            },
+            new AttributeItem() {
+                Name = "Class",
+                Description = "样式",
+                Type = "string",
+                ValueList = " — ",
+                DefaultValue = " — "
+            },
+            new AttributeItem() {
+                Name = "IsDisabled",
+                Description = "是否禁用",
+                Type = "boolean",
+                ValueList = " — ",
+                DefaultValue = "false"
+            },
+        };
+
+        /// <summary>
+        /// 获得事件方法
+        /// </summary>
+        /// <returns></returns>
+        protected IEnumerable<EventItem> GetEvents() => new EventItem[]
+        {
+            new EventItem()
+            {
+                Name = "ValueChanged",
+                Description=" ValueChanged 回调方法",
+                Type ="EventCallback<int>"
+            }
+        };
     }
 }

src/BootstrapBlazor.WebConsole/Pages/Spinners.razor.cs

@@ -22,6 +22,13 @@ namespace BootstrapBlazor.WebConsole.Pages
                 ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
                 DefaultValue = "Primary"
             },
+            new AttributeItem() {
+                Name = "Size",
+                Description = "尺寸",
+                Type = "Size",
+                ValueList = "None / ExtraSmall / Small / Medium / Large / ExtraLarge",
+                DefaultValue = "None"
+            },
             new AttributeItem() {
                 Name = "Class",
                 Description = "样式",
@@ -35,7 +42,7 @@ namespace BootstrapBlazor.WebConsole.Pages
                 Type = "SpinnerType",
                 ValueList = " Border / Grow ",
                 DefaultValue = "SpinnerType.Border"
-            }
+            },
         };
     }
 }

src/BootstrapBlazor.WebConsole/Pages/Switchs.razor

@@ -3,7 +3,6 @@
 <Block Title="Switch 开关" Introduction="提供最普通的开关应用" CodeFile="switch.1.txt">
     <div class="form-inline">
         <div class="row">
-
             <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnValueChanged="@OnValueChanged" Value="true" OnColor="Color.Secondary" OnText="开启" OffText="关闭">Secondary</Switch></div>
             <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnValueChanged="@OnValueChanged" Value="true" OnColor="Color.Success" OnText="开启" OffText="关闭">Success</Switch></div>
             <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto"><Switch OnValueChanged="@OnValueChanged" Value="true" OnColor="Color.Danger" OnText="开启" OffText="关闭">Danger</Switch></div>
@@ -28,7 +27,6 @@
     </div>
 </Block>
 
-
 <Block Title="禁用状态" Introduction="开关不可用状态。" CodeFile="switch.3.txt">
     <div class="form-inline">
         <div class="row">
@@ -46,3 +44,5 @@
 </Block>
 
 <AttributeTable Items="@GetAttributes()" />
+
+<EventTable Items="@GetEvents()" />

src/BootstrapBlazor.WebConsole/Pages/Switchs.razor.cs

@@ -54,12 +54,81 @@ namespace BootstrapBlazor.WebConsole.Pages
                 DefaultValue = "false"
             },
             new AttributeItem() {
-                Name = "OnColor OffColor",
-                Description = "开关颜色设置",
+                Name = "Size",
+                Description = "尺寸",
+                Type = "Size",
+                ValueList = "None / ExtraSmall / Small / Medium / Large / ExtraLarge",
+                DefaultValue = "None"
+            },
+            new AttributeItem() {
+                Name = "Width",
+                Description = "组件宽度",
+                Type = "int",
+                ValueList = "—",
+                DefaultValue = "40"
+            },
+            new AttributeItem() {
+                Name = "Height",
+                Description = "控件高度",
+                Type = "int",
+                ValueList = "—",
+                DefaultValue = "20"
+            },
+            new AttributeItem() {
+                Name = "OnText",
+                Description = "组件 On 时显示文本",
+                Type = "string",
+                ValueList = "—",
+                DefaultValue = "—"
+            },
+            new AttributeItem() {
+                Name = "OffText",
+                Description = "组件 Off 时显示文本",
+                Type = "string",
+                ValueList = "—",
+                DefaultValue = "—"
+            },
+            new AttributeItem() {
+                Name = "OnColor",
+                Description = "开颜色设置",
                 Type = "Color",
                 ValueList = " Primary / Secondary / Success / Danger / Warning / Info / Dark ",
-                DefaultValue = ""
+                DefaultValue = "Color.Success"
             },
+            new AttributeItem() {
+                Name = "OffColor",
+                Description = "关颜色设置",
+                Type = "Color",
+                ValueList = " Primary / Secondary / Success / Danger / Warning / Info / Dark ",
+                DefaultValue = "None"
+            },
+            new AttributeItem() {
+                Name = "Value",
+                Description = "获取值",
+                Type = "boolean",
+                ValueList = " ",
+                DefaultValue = "None"
+            },
+        };
+
+        /// <summary>
+        /// 获得事件方法
+        /// </summary>
+        /// <returns></returns>
+        protected IEnumerable<EventItem> GetEvents() => new EventItem[]
+        {
+            new EventItem()
+            {
+                Name = "ValueChanged",
+                Description="获取选择改变的值",
+                Type ="EventCallback<bool>"
+            },
+            new EventItem()
+            {
+                Name = "OnValueChanged",
+                Description="控件值变化时触发此事件",
+                Type ="Action<bool>"
+            }
         };
     }
 }

src/BootstrapBlazor.WebConsole/Pages/Toasts.razor

@@ -50,4 +50,4 @@
 
 <AttributeTable Items="@GetAttributes()" />
 
-<Toast @ref="Toast"></Toast>
+<Toast @ref="Toast"></Toast>

src/BootstrapBlazor.WebConsole/Pages/Toasts.razor.cs

@@ -127,14 +127,14 @@ namespace BootstrapBlazor.WebConsole.Pages
                 Name = "Title",
                 Description = "Popover 弹窗标题",
                 Type = "string",
-                ValueList = "",
+                ValueList = "—",
                 DefaultValue = "Popover"
             },
             new AttributeItem() {
                 Name = "Cotent",
                 Description = "Popover 弹窗内容",
                 Type = "string",
-                ValueList = "",
+                ValueList = "—",
                 DefaultValue = "Popover"
             },
             new AttributeItem() {
@@ -143,6 +143,27 @@ namespace BootstrapBlazor.WebConsole.Pages
                 Type = "boolean",
                 ValueList = "",
                 DefaultValue = "false"
+            },
+            new AttributeItem() {
+                Name = "IsAutoHide",
+                Description = "是否自动隐藏",
+                Type = "boolean",
+                ValueList = "",
+                DefaultValue = "true"
+            },
+            new AttributeItem() {
+                Name = "Category",
+                Description = "弹出框类型",
+                Type = "ToastCategory",
+                ValueList = "Success/Information/Error",
+                DefaultValue = "false"
+            },
+            new AttributeItem() {
+                Name = "Delay",
+                Description = "自动隐藏时间间隔",
+                Type = "int",
+                ValueList = "—",
+                DefaultValue = "4000"
             }
         };
     }

src/BootstrapBlazor.WebConsole/Pages/Toggles.razor.cs

@@ -33,9 +33,15 @@ namespace BootstrapBlazor.WebConsole.Pages
         {
             new EventItem()
             {
-                Name = "OnValueChanged",
-                Description="组件值变化时触发此事件",
+                Name = "ValueChanged",
+                Description="获取选择改变的值",
                 Type ="EventCallback<bool>"
+            },
+            new EventItem()
+            {
+                Name = "OnValueChanged",
+                Description="控件值变化时触发此事件",
+                Type ="Action<bool>"
             }
         };
 
@@ -66,7 +72,28 @@ namespace BootstrapBlazor.WebConsole.Pages
                 Type = "boolean",
                 ValueList = " — ",
                 DefaultValue = "false"
-            }
+            },
+            new AttributeItem() {
+                Name = "OnText",
+                Description = "组件 On 时显示文本",
+                Type = "string",
+                ValueList = "—",
+                DefaultValue = "展开"
+            },
+            new AttributeItem() {
+                Name = "OffText",
+                Description = "组件 Off 时显示文本",
+                Type = "string",
+                ValueList = "—",
+                DefaultValue = "收缩"
+            },
+            new AttributeItem() {
+                Name = "Value",
+                Description = "获取值",
+                Type = "boolean",
+                ValueList = " ",
+                DefaultValue = "None"
+            },
         };
     }
 }

src/BootstrapBlazor.WebConsole/wwwroot/code/pagination.1.txt

@@ -1 +1,7 @@
-<Pagination PageItems="3" PageItemsSource="@PageItems" TotalCount="30" />
+<Pagination PageItems="3" PageItemsSource="@PageItems" TotalCount="30" OnPageClick="@OnPageClick" OnPageItemsChanged="@OnPageItemsChanged"></Pagination>
+
+@code{
+     private IEnumerable<int> PageItems => new int[] { 3, 10, 20, 40 };
+
+
+}

src/BootstrapBlazor.WebConsole/wwwroot/code/pagination.2.txt

@@ -1,3 +1 @@
-<Pagination Total="10" CurrentPage="5" Size="Size.Large"></Pagination>
-<Pagination Total="10" CurrentPage="5" Size="Size.None"></Pagination>
-<Pagination Total="10" CurrentPage="5" Size="Size.Small"></Pagination>
+<Pagination PageItems="20" TotalCount="1"></Pagination>

src/BootstrapBlazor.WebConsole/wwwroot/code/pagination.3.txt

@@ -1 +1 @@
-<Pagination Total="10" CurrentPage="5" Size="Size.Large" DisableList="@disableList"></Pagination>
+<Pagination PageItems="20" TotalCount="100" ShowPaginationInfo="false"></Pagination>

src/BootstrapBlazor.WebConsole/wwwroot/code/radio.4.txt

@@ -1 +1,8 @@
 <Radio Items="@Items" OnStateChanged="@OnItemChanged"></Radio>
+@code{
+     protected IEnumerable<SelectedItem> Items => new SelectedItem[]
+     {
+         new SelectedItem("1", "北京") { Active = true },
+         new SelectedItem("2", "上海")
+     };
+}

src/BootstrapBlazor.WebConsole/wwwroot/code/slider.1.txt

@@ -1 +1,3 @@
 <Slider></Slider>
+<Slider Value="50" Label="自定义初始值"></Slider>
+<Slider Value="42" IsDisabled="true" Label="禁用"></Slider>

src/BootstrapBlazor.WebConsole/wwwroot/code/slider.2.txt

@@ -1,5 +1,5 @@
 <Slider @bind-Value="@BindValue" Label="自定义初始值"></Slider>
-
+<BootstrapInput @bind-Value="@BindValue" readonly></BootstrapInput>
 @code {
     private int BindValue { get; set; } = 50;
 }

src/BootstrapBlazor.WebConsole/wwwroot/code/toast.1.txt

@@ -0,0 +1,41 @@
+<ToastBox class="d-block" Title="保存数据" IsAutoHide="false" Content="保存数据成功，4 秒后自动关闭"></ToastBox>
+<ToastBox class="d-block" Category="ToastCategory.Error" Title="保存数据" IsAutoHide="false" Content="保存数据失败，4 秒后自动关闭"></ToastBox>
+<ToastBox class="d-block" Category="ToastCategory.Information" Title="提示信息" IsAutoHide="false"  Content="信息提示弹窗，4 秒后自动关闭"></ToastBox>
+<Button Color="Color.Success" OnClick="@OnSuccessClick">成功通知</Button>
+<Button Color="Color.Danger" OnClick="@OnErrorClick" >失败通知</Button>
+<Button Color="Color.Info" OnClick="@OnInfoClick" >信息通知</Button>
+
+@code{
+        protected void OnSuccessClick()
+        {
+            Toast?.SetPlacement(Placement.BottomEnd);
+            ToastService?.Show(new ToastOption()
+            {
+                Category = ToastCategory.Success,
+                Title = "保存成功",
+                Content = "保存数据成功，4 秒后自动关闭"
+            });
+        }
+
+        protected void OnErrorClick()
+        {
+            Toast?.SetPlacement(Placement.BottomEnd);
+            ToastService?.Show(new ToastOption()
+            {
+                Category = ToastCategory.Error,
+                Title = "保存失败",
+                Content = "保存数据失败，4 秒后自动关闭"
+            });
+        }
+
+        protected void OnInfoClick()
+        {
+            Toast?.SetPlacement(Placement.BottomEnd);
+            ToastService?.Show(new ToastOption()
+            {
+                Category = ToastCategory.Information,
+                Title = "消息通知",
+                Content = "系统增加新组件啦，4 秒后自动关闭"
+            });
+        }
+}

src/BootstrapBlazor.WebConsole/wwwroot/code/toast.2.txt

@@ -0,0 +1,15 @@
+<Button OnClick="@OnNotAutoHideClick">成功通知</Button>
+
+@code{
+        protected void OnNotAutoHideClick()
+        {
+            Toast?.SetPlacement(Placement.BottomEnd);
+            ToastService?.Show(new ToastOption()
+            {
+                Category = ToastCategory.Information,
+                IsAutoHide = false,
+                Title = "消息通知",
+                Content = "我不会自动关闭哦，请点击右上角关闭按钮"
+            });
+        }
+}

src/BootstrapBlazor.WebConsole/wwwroot/code/toast.3.txt

@@ -0,0 +1,15 @@
+<Button OnClick="e => OnPlacementClick(Placement.TopEnd)">右上角</Button>
+<Button OnClick="e => OnPlacementClick(Placement.BottomEnd)">右下角</Button>
+
+@code{
+        protected void OnPlacementClick(Placement placement)
+        {
+            Toast?.SetPlacement(placement);
+            ToastService?.Show(new ToastOption()
+            {
+                Category = ToastCategory.Information,
+                Title = "消息通知",
+                Content = "<b>Toast</b> 组件更改位置啦，4 秒后自动关闭"
+            });
+        }
+}

src/BootstrapBlazor/Components/Collapse/CollapseBase.cs

@@ -19,7 +19,7 @@ namespace BootstrapBlazor.Components
             .Build();
 
         /// <summary>
-        /// 是否展开折叠面板
+        /// 是否收缩折叠面板
         /// </summary>
         [Parameter] public bool IsCollapsed { get; set; } = true;
 

src/BootstrapBlazor/Components/Spinner/Spinner.razor

@@ -1,5 +1,5 @@
 @namespace BootstrapBlazor.Components
-@inherits SpannerBase
+@inherits SpinnerBase
 
 <div @attributes="@AdditionalAttributes" class="@ClassName" id="@Id" role="status">
     <span class="sr-only">Loading...</span>

src/BootstrapBlazor/Components/Spinner/SpinnerBase.cs

@@ -5,7 +5,7 @@ namespace BootstrapBlazor.Components
     /// <summary>
     /// Spinner 组件基类
     /// </summary>
-    public abstract class SpannerBase : BootstrapComponentBase
+    public abstract class SpinnerBase : BootstrapComponentBase
     {
         /// <summary>
         /// 获取Spinner样式
@@ -15,6 +15,7 @@ namespace BootstrapBlazor.Components
             .AddClass($"text-{Color.ToDescriptionString()}", Color != Color.None)
             .AddClass($"spinner-border-{Size.ToDescriptionString()}", Size != Size.None)
             .AddClass(Class)
+            .AddClassFromAttributes(AdditionalAttributes)
             .Build();
 
         /// <summary>