diff --git a/src/BootstrapBlazor.Shared/Locales/en.json b/src/BootstrapBlazor.Shared/Locales/en.json
index 9a692cbce..250ec96c2 100644
--- a/src/BootstrapBlazor.Shared/Locales/en.json
+++ b/src/BootstrapBlazor.Shared/Locales/en.json
@@ -3242,6 +3242,24 @@
"SetFilterInCodeButtonText1": "Name contains 01",
"SetFilterInCodeButtonText2": "Reset All Filter"
},
+ "BootstrapBlazor.Shared.Samples.Table.TablesFixedHeader": {
+ "Title": "Fixed header function",
+ "Desc": "When scrolling data, the header is fixed to facilitate viewing the header information of each column",
+ "DescP": " The fixed header of this component adopts the double header
method. When there is a common problem, the column is not aligned. Please add some styles according to your actual situation.
,Please set the width of each column as much as possible to avoid the problem of misalignment of column width",
+ "FixedHeaderTitle": "Width adaptive",
+ "FixedHeaderIntro": "Set Height=200
fixed header",
+ "FixedHeaderP": "Example of vertical scroll bar after more data is loaded",
+ "FixedHeaderP1": "Please set a column width, allow a column width not set, auto-fill",
+ "FixedWidthTitle": "FixedWidth",
+ "FixedWidthIntro": "Set the Height=200
fixed header, when the displayed data on each page is 10
rows, the height exceeds the set value 200
, A vertical scroll bar appears on the Table component",
+ "FixedWidthP": "All columns are set to width, and a horizontal scroll bar will automatically appear when the screen is too small",
+ "AllowResizingTitle": "Width Adjustable",
+ "AllowResizingIntro": "Set the AllowResizing
property while fixing the header so that the column width can be adjusted",
+ "AllowResizingP": "By setting the Height
parameter to fix the header,
, by setting AllowResizing
, the parameter allows the column width to be adjusted",
+ "AutoHeightTitle": "Automatic Height",
+ "AutoHeightIntro": "Do not set the Height
value to adapt the height through the parent container",
+ "AutoHeightP": "In this example, the Table
table component cannot set the height because the height may not be known. The parent container may get the height through the style. At this time, the Table
component will try to Use adaptive fill to fill the height, this application scenario is the most in actual combat, in this example, the simulated parent height is 300px
"
+ },
"BootstrapBlazor.Shared.Pages.Introduction": {
"Title": "Introduction",
"P1": "BootstrapBlazor is an enterprise-level component library based on Bootstrap and Blazor, which can be considered as the Blazor version of the Bootstrap project.",
diff --git a/src/BootstrapBlazor.Shared/Locales/zh.json b/src/BootstrapBlazor.Shared/Locales/zh.json
index 9973d8cc2..c40ac338e 100644
--- a/src/BootstrapBlazor.Shared/Locales/zh.json
+++ b/src/BootstrapBlazor.Shared/Locales/zh.json
@@ -3220,38 +3220,6 @@
"SelectedItemValue1": "姓名1",
"SelectedItemValue2": "姓名2"
},
- "BootstrapBlazor.Shared.Pages.Introduction": {
- "Title": "简介",
- "P1": "BootstrapBlazor 是一套基于 Bootstrap 和 Blazor 的企业级组件库,可以认为是 Bootstrap 项目的 Blazor 版实现。",
- "P2": "依赖关系为:BootstrapBlazor > Bootstrap > jQuery",
- "P3": "最新 项目模板 中将以上依赖进行了打包捆绑大大简化使用",
- "UpdateTitle": "更新日志",
- "UpdateLog": "组件为了修复 bug
每天可能有小版本发布,每个月第二个 周四
发布 正式版
更新日志 [传送门]",
- "LearnTitle": "学习资料",
- "LearnLi1": "Blazor 官方文档",
- "LearnLi2": "使用 Blazor WebAssembly 和 Visual Studio Code 生成 Web 应用",
- "LearnLi3": "什么是 Blazor",
- "LearnLi4": "练习 - 配置开发环境",
- "LearnLi5": "Blazor 组件",
- "LearnLi6": "练习 - 添加组件",
- "LearnLi7": "数据绑定和事件",
- "LearnLi8": "练习 - 数据绑定和事件",
- "Summarize": "总结",
- "ProjectsShow": "作品展示",
- "P5": "国内最大代码托管协作开发平台 码云 C# 板块最高星 作品 通用后台管理系统 BootstrapAdmin 准备使用本组件实现全部功能",
- "ShowWebSiteTitle": "演示网站",
- "GetStarted": "快速上手",
- "QuikStart": "快速入门",
- "Features": "组件特色",
- "P6": "Bootstrap Blazor UI 组件库提供了从基本的 Button
组件到高级的网页级 SmartPage
组件",
- "Advantage": "优势",
- "AdvantageLi1": "使用组件无需编写 Javascript
",
- "AdvantageLi2": "组件支持所有 html
特性",
- "AdvantageLi3": "组件支持数据双向绑定",
- "AdvantageLi4": "组件支持自动客户端验证",
- "AdvantageLi5": "组件支持组合",
- "Community": "交流群"
- },
"BootstrapBlazor.Shared.Samples.Table.TablesFilter": {
"Title": "筛选和排序功能",
"Desc": "筛选可快速查找到自己想看的数据;排序可快速查找或对比数据。",
@@ -3287,6 +3255,56 @@
"SetFilterInCodeButtonText1": "名称包含01",
"SetFilterInCodeButtonText2": "重置条件"
},
+ "BootstrapBlazor.Shared.Samples.Table.TablesFixedHeader": {
+ "Title": "固定表头功能",
+ "Desc": "滚动数据时表头固定方便查看各列表头信息",
+ "DescP": " 本组件固定表头做法采用的是 双表头
做法,常见问题时出现列不对齐的问题,根据自己实际情况请自行添加部分样式,
,固定表头用法请尽可能的设置每列宽度,以避免列宽不对齐的问题",
+ "FixedHeaderTitle": "宽度自适应",
+ "FixedHeaderIntro": "设置 Height=200
固定表头",
+ "FixedHeaderP": "数据比较多加载后即出现纵向滚动条示例",
+ "FixedHeaderP1": "请设置个列宽度,允许一列宽度不设置,进行自动填充",
+ "FixedWidthTitle": "宽度固定",
+ "FixedWidthIntro": "设置 Height=200
固定表头,当每页显示数据为 10
行时高度超出设置值 200
后,Table 组件出现纵向滚动条",
+ "FixedWidthP": "所有列均设置宽度,当屏幕过小时会自动出现横向滚动条",
+ "AllowResizingTitle": "宽度可调整",
+ "AllowResizingIntro": "固定表头的同时设置 AllowResizing
属性,使列宽可以调整",
+ "AllowResizingP": "通过设置 Height
参数固定表头,
,通过设置 AllowResizing
,参数允许调整列宽",
+ "AutoHeightTitle": "自适应高度",
+ "AutoHeightIntro": "不设置 Height
值通过父容器自适应高度",
+ "AutoHeightP": "本例中 Table
表格组件由于可能未知高度,所以无法设置高度,父级容器可能通过样式得到高度,此时 Table
组件会尝试使用自适应填充满高度,实战中这种应用场景是最多的,本例模拟父级高度为 300px
"
+ },
+ "BootstrapBlazor.Shared.Pages.Introduction": {
+ "Title": "简介",
+ "P1": "BootstrapBlazor 是一套基于 Bootstrap 和 Blazor 的企业级组件库,可以认为是 Bootstrap 项目的 Blazor 版实现。",
+ "P2": "依赖关系为:BootstrapBlazor > Bootstrap > jQuery",
+ "P3": "最新 项目模板 中将以上依赖进行了打包捆绑大大简化使用",
+ "UpdateTitle": "更新日志",
+ "UpdateLog": "组件为了修复 bug
每天可能有小版本发布,每个月第二个 周四
发布 正式版
更新日志 [传送门]",
+ "LearnTitle": "学习资料",
+ "LearnLi1": "Blazor 官方文档",
+ "LearnLi2": "使用 Blazor WebAssembly 和 Visual Studio Code 生成 Web 应用",
+ "LearnLi3": "什么是 Blazor",
+ "LearnLi4": "练习 - 配置开发环境",
+ "LearnLi5": "Blazor 组件",
+ "LearnLi6": "练习 - 添加组件",
+ "LearnLi7": "数据绑定和事件",
+ "LearnLi8": "练习 - 数据绑定和事件",
+ "Summarize": "总结",
+ "ProjectsShow": "作品展示",
+ "P5": "国内最大代码托管协作开发平台 码云 C# 板块最高星 作品 通用后台管理系统 BootstrapAdmin 准备使用本组件实现全部功能",
+ "ShowWebSiteTitle": "演示网站",
+ "GetStarted": "快速上手",
+ "QuikStart": "快速入门",
+ "Features": "组件特色",
+ "P6": "Bootstrap Blazor UI 组件库提供了从基本的 Button
组件到高级的网页级 SmartPage
组件",
+ "Advantage": "优势",
+ "AdvantageLi1": "使用组件无需编写 Javascript
",
+ "AdvantageLi2": "组件支持所有 html
特性",
+ "AdvantageLi3": "组件支持数据双向绑定",
+ "AdvantageLi4": "组件支持自动客户端验证",
+ "AdvantageLi5": "组件支持组合",
+ "Community": "交流群"
+ },
"BootstrapBlazor.Shared.Components.QQGroup": {
"Group": "QQ群",
"Status": "满",
diff --git a/src/BootstrapBlazor.Shared/Samples/Table/TablesFixedHeader.razor b/src/BootstrapBlazor.Shared/Samples/Table/TablesFixedHeader.razor
index dce677fe0..1c27301e1 100644
--- a/src/BootstrapBlazor.Shared/Samples/Table/TablesFixedHeader.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Table/TablesFixedHeader.razor
@@ -1,18 +1,14 @@
@page "/tables/header"
-
- 本组件固定表头做法采用的是 双表头
做法,常见问题时出现列不对齐的问题,根据自己实际情况请自行添加部分样式
-
- 固定表头用法请尽可能的设置每列宽度,以避免列宽不对齐的问题
-
@((MarkupString)FixheaderLocalizer["DescP"].Value)
-数据比较多加载后即出现纵向滚动条示例
-请设置个列宽度,允许一列宽度不设置,进行自动填充
+@FixheaderLocalizer["FixedHeaderP"]
+@FixheaderLocalizer["FixedHeaderP1"]
- 所有列均设置宽度,当屏幕过小时会自动出现横向滚动条 -
+@FixheaderLocalizer["FixedWidthP"]
- 通过设置 Height
参数固定表头
-
- 通过设置 AllowResizing
参数允许调整列宽
-
@((MarkupString)FixheaderLocalizer["AllowResizingP"].Value)
本例中 Table
表格组件由于可能未知高度,所以无法设置高度,父级容器可能通过样式得到高度,此时 Table
组件会尝试使用自适应填充满高度,实战中这种应用场景是最多的,本例模拟父级高度为 300px
@((MarkupString)FixheaderLocalizer["AutoHeightP"].Value)