mirror of
https://gitee.com/LongbowEnterprise/BootstrapBlazor.git
synced 2024-12-02 03:59:14 +08:00
!2849 doc(#I5AH5M):add english translation of table fixheader page
* doc: 添加 table fixheader 示例页面翻译
This commit is contained in:
Nine
parent
77d0ed1f5b
commit
9d5613a826
@ -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 <code>double header</code> method. When there is a common problem, the column is not aligned. Please add some styles according to your actual situation.<br /> ,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 <code>Height=200</code> 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 <code>Height=200</code> fixed header, when the displayed data on each page is <code>10</code> rows, the height exceeds the set value <code>200</code>, 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 <code>AllowResizing</code> property while fixing the header so that the column width can be adjusted",
|
||||
"AllowResizingP": "By setting the <code>Height</code> parameter to fix the header, <br />, by setting <code>AllowResizing </code>, the parameter allows the column width to be adjusted",
|
||||
"AutoHeightTitle": "Automatic Height",
|
||||
"AutoHeightIntro": "Do not set the <code>Height</code> value to adapt the height through the parent container",
|
||||
"AutoHeightP": "In this example, the <code>Table</code> 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 <code>Table</code> 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 <code>300px</code>"
|
||||
},
|
||||
"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.",
|
||||
|
||||
@ -3220,38 +3220,6 @@
|
||||
"SelectedItemValue1": "姓名1",
|
||||
"SelectedItemValue2": "姓名2"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Pages.Introduction": {
|
||||
"Title": "简介",
|
||||
"P1": "BootstrapBlazor 是一套基于 Bootstrap 和 Blazor 的企业级组件库，可以认为是 Bootstrap 项目的 Blazor 版实现。",
|
||||
"P2": "依赖关系为：BootstrapBlazor > Bootstrap > jQuery",
|
||||
"P3": "最新 <a href='template' target='_blank'>项目模板</a> 中将以上依赖进行了打包捆绑大大简化使用",
|
||||
"UpdateTitle": "更新日志",
|
||||
"UpdateLog": "组件为了修复 <code>bug</code> 每天可能有小版本发布，每个月第二个 <b><code>周四</code></b> 发布 <b><code>正式版</code></b> 更新日志 <a id='log' data-bs-toggle='popover' title='更新日志' data-bs-content='组件为了修复 <code>bug</code> 每天可能有小版本发布，每个月第二个 <b><code>周四</code></b> 发布 <b><code>正式版</code></b> 更新日志' data-bs-html='true' href='{0}' target='_blank'>[传送门]</a>",
|
||||
"LearnTitle": "学习资料",
|
||||
"LearnLi1": "Blazor 官方文档",
|
||||
"LearnLi2": "使用 Blazor WebAssembly 和 Visual Studio Code 生成 Web 应用",
|
||||
"LearnLi3": "什么是 Blazor",
|
||||
"LearnLi4": "练习 - 配置开发环境",
|
||||
"LearnLi5": "Blazor 组件",
|
||||
"LearnLi6": "练习 - 添加组件",
|
||||
"LearnLi7": "数据绑定和事件",
|
||||
"LearnLi8": "练习 - 数据绑定和事件",
|
||||
"Summarize": "总结",
|
||||
"ProjectsShow": "作品展示",
|
||||
"P5": "国内最大代码托管协作开发平台 <b><a href='{0}' target='_blank'>码云</a></b> C# 板块最高星 <a href='{1}'><img src='{2}' alt='star' style='margin-bottom': '1px;' ></a> 作品 <b><a href='{3}' target=''_blank'>通用后台管理系统 BootstrapAdmin</a></b> 准备使用本组件实现全部功能",
|
||||
"ShowWebSiteTitle": "演示网站",
|
||||
"GetStarted": "快速上手",
|
||||
"QuikStart": "快速入门",
|
||||
"Features": "组件特色",
|
||||
"P6": "Bootstrap Blazor UI 组件库提供了从基本的 <code>Button</code> 组件到高级的网页级 <code>SmartPage</code> 组件",
|
||||
"Advantage": "优势",
|
||||
"AdvantageLi1": "使用组件无需编写 <code>Javascript</code>",
|
||||
"AdvantageLi2": "组件支持所有 <code>html</code> 特性",
|
||||
"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": " 本组件固定表头做法采用的是 <code>双表头</code> 做法，常见问题时出现列不对齐的问题，根据自己实际情况请自行添加部分样式,<br />,固定表头用法请尽可能的设置每列宽度，以避免列宽不对齐的问题",
|
||||
"FixedHeaderTitle": "宽度自适应",
|
||||
"FixedHeaderIntro": "设置 <code>Height=200</code> 固定表头",
|
||||
"FixedHeaderP": "数据比较多加载后即出现纵向滚动条示例",
|
||||
"FixedHeaderP1": "请设置个列宽度，允许一列宽度不设置，进行自动填充",
|
||||
"FixedWidthTitle": "宽度固定",
|
||||
"FixedWidthIntro": "设置 <code>Height=200</code> 固定表头，当每页显示数据为 <code>10</code> 行时高度超出设置值 <code>200</code> 后，Table 组件出现纵向滚动条",
|
||||
"FixedWidthP": "所有列均设置宽度，当屏幕过小时会自动出现横向滚动条",
|
||||
"AllowResizingTitle": "宽度可调整",
|
||||
"AllowResizingIntro": "固定表头的同时设置 <code>AllowResizing</code> 属性，使列宽可以调整",
|
||||
"AllowResizingP": "通过设置 <code>Height</code> 参数固定表头,<br />,通过设置 <code>AllowResizing </code>,参数允许调整列宽",
|
||||
"AutoHeightTitle": "自适应高度",
|
||||
"AutoHeightIntro": "不设置 <code>Height</code> 值通过父容器自适应高度",
|
||||
"AutoHeightP": "本例中 <code>Table</code> 表格组件由于可能未知高度，所以无法设置高度，父级容器可能通过样式得到高度，此时 <code>Table</code> 组件会尝试使用自适应填充满高度，实战中这种应用场景是最多的，本例模拟父级高度为 <code>300px</code>"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Pages.Introduction": {
|
||||
"Title": "简介",
|
||||
"P1": "BootstrapBlazor 是一套基于 Bootstrap 和 Blazor 的企业级组件库，可以认为是 Bootstrap 项目的 Blazor 版实现。",
|
||||
"P2": "依赖关系为：BootstrapBlazor > Bootstrap > jQuery",
|
||||
"P3": "最新 <a href='template' target='_blank'>项目模板</a> 中将以上依赖进行了打包捆绑大大简化使用",
|
||||
"UpdateTitle": "更新日志",
|
||||
"UpdateLog": "组件为了修复 <code>bug</code> 每天可能有小版本发布，每个月第二个 <b><code>周四</code></b> 发布 <b><code>正式版</code></b> 更新日志 <a id='log' data-bs-toggle='popover' title='更新日志' data-bs-content='组件为了修复 <code>bug</code> 每天可能有小版本发布，每个月第二个 <b><code>周四</code></b> 发布 <b><code>正式版</code></b> 更新日志' data-bs-html='true' href='{0}' target='_blank'>[传送门]</a>",
|
||||
"LearnTitle": "学习资料",
|
||||
"LearnLi1": "Blazor 官方文档",
|
||||
"LearnLi2": "使用 Blazor WebAssembly 和 Visual Studio Code 生成 Web 应用",
|
||||
"LearnLi3": "什么是 Blazor",
|
||||
"LearnLi4": "练习 - 配置开发环境",
|
||||
"LearnLi5": "Blazor 组件",
|
||||
"LearnLi6": "练习 - 添加组件",
|
||||
"LearnLi7": "数据绑定和事件",
|
||||
"LearnLi8": "练习 - 数据绑定和事件",
|
||||
"Summarize": "总结",
|
||||
"ProjectsShow": "作品展示",
|
||||
"P5": "国内最大代码托管协作开发平台 <b><a href='{0}' target='_blank'>码云</a></b> C# 板块最高星 <a href='{1}'><img src='{2}' alt='star' style='margin-bottom': '1px;' ></a> 作品 <b><a href='{3}' target=''_blank'>通用后台管理系统 BootstrapAdmin</a></b> 准备使用本组件实现全部功能",
|
||||
"ShowWebSiteTitle": "演示网站",
|
||||
"GetStarted": "快速上手",
|
||||
"QuikStart": "快速入门",
|
||||
"Features": "组件特色",
|
||||
"P6": "Bootstrap Blazor UI 组件库提供了从基本的 <code>Button</code> 组件到高级的网页级 <code>SmartPage</code> 组件",
|
||||
"Advantage": "优势",
|
||||
"AdvantageLi1": "使用组件无需编写 <code>Javascript</code>",
|
||||
"AdvantageLi2": "组件支持所有 <code>html</code> 特性",
|
||||
"AdvantageLi3": "组件支持数据双向绑定",
|
||||
"AdvantageLi4": "组件支持自动客户端验证",
|
||||
"AdvantageLi5": "组件支持组合",
|
||||
"Community": "交流群"
|
||||
},
|
||||
"BootstrapBlazor.Shared.Components.QQGroup": {
|
||||
"Group": "QQ群",
|
||||
"Status": "满",
|
||||
|
||||
@ -1,18 +1,14 @@
|
||||
@page "/tables/header"
|
||||
|
||||
<h3>固定表头功能</h3>
|
||||
<h3>@FixheaderLocalizer["Title"]</h3>
|
||||
|
||||
<h4>滚动数据时表头固定方便查看各列表头信息</h4>
|
||||
<h4>@FixheaderLocalizer["Desc"]</h4>
|
||||
|
||||
<p>
|
||||
本组件固定表头做法采用的是 <code>双表头</code> 做法，常见问题时出现列不对齐的问题，根据自己实际情况请自行添加部分样式
|
||||
<br />
|
||||
固定表头用法请尽可能的设置每列宽度，以避免列宽不对齐的问题
|
||||
</p>
|
||||
<p>@((MarkupString)FixheaderLocalizer["DescP"].Value)</p>
|
||||
|
||||
<DemoBlock Title="宽度自适应" Introduction="设置 <code>Height=200</code> 固定表头" Name="FixedHeader">
|
||||
<p>数据比较多加载后即出现纵向滚动条示例</p>
|
||||
<p>请设置个列宽度，允许一列宽度不设置，进行自动填充</p>
|
||||
<DemoBlock Title="@FixheaderLocalizer["FixedHeaderTitle"]" Introduction="@FixheaderLocalizer["FixedHeaderIntro"]" Name="FixedHeader">
|
||||
<p>@FixheaderLocalizer["FixedHeaderP"]</p>
|
||||
<p>@FixheaderLocalizer["FixedHeaderP1"]</p>
|
||||
<Table TItem="Foo" Items="@Items.Take(10)" Height="200" IsBordered="true" IsFixedHeader="true">
|
||||
<TableColumns>
|
||||
<TableColumn @bind-Field="@context.DateTime" Width="180" />
|
||||
@ -22,10 +18,8 @@
|
||||
</Table>
|
||||
</DemoBlock>
|
||||
|
||||
<DemoBlock Title="宽度固定" Introduction="设置 <code>Height=200</code> 固定表头，当每页显示数据为 <code>10</code> 行时高度超出设置值 <code>200</code> 后，Table 组件出现纵向滚动条" Name="FixedWidth">
|
||||
<p>
|
||||
所有列均设置宽度，当屏幕过小时会自动出现横向滚动条
|
||||
</p>
|
||||
<DemoBlock Title="@FixheaderLocalizer["FixedWidthTitle"]" Introduction="@FixheaderLocalizer["FixedWidthIntro"]" Name="FixedWidth">
|
||||
<p>@FixheaderLocalizer["FixedWidthP"]</p>
|
||||
<Table TItem="Foo" Items="@Items.Take(10)" IsBordered="true" IsMultipleSelect="true" Height="200" IsFixedHeader="true">
|
||||
<TableColumns>
|
||||
<TableColumn @bind-Field="@context.DateTime" Width="180" />
|
||||
@ -35,12 +29,8 @@
|
||||
</Table>
|
||||
</DemoBlock>
|
||||
|
||||
<DemoBlock Title="宽度可调整" Introduction="固定表头的同时设置 <code>AllowResizing</code> 属性，使列宽可以调整" Name="AllowResizing">
|
||||
<p>
|
||||
通过设置 <code>Height</code> 参数固定表头
|
||||
<br />
|
||||
通过设置 <code>AllowResizing</code> 参数允许调整列宽
|
||||
</p>
|
||||
<DemoBlock Title="@FixheaderLocalizer["AllowResizingTitle"]" Introduction="@FixheaderLocalizer["AllowResizingIntro"]" Name="AllowResizing">
|
||||
<p>@((MarkupString)FixheaderLocalizer["AllowResizingP"].Value)</p>
|
||||
<Table TItem="Foo" Items="@Items.Take(10)"
|
||||
IsBordered="true" IsMultipleSelect="true" IsPagination="true" IsFixedHeader="true"
|
||||
Height="200" AllowResizing="true">
|
||||
@ -52,8 +42,8 @@
|
||||
</Table>
|
||||
</DemoBlock>
|
||||
|
||||
<DemoBlock Title="自适应高度" Introduction="不设置 <code>Height</code> 值通过父容器自适应高度" Name="AutoHeight">
|
||||
<p>本例中 <code>Table</code> 表格组件由于可能未知高度，所以无法设置高度，父级容器可能通过样式得到高度，此时 <code>Table</code> 组件会尝试使用自适应填充满高度，实战中这种应用场景是最多的，本例模拟父级高度为 <code>300px</code></p>
|
||||
<DemoBlock Title="@FixheaderLocalizer["AutoHeightTitle"]" Introduction="@FixheaderLocalizer["AutoHeightIntro"]" Name="AutoHeight">
|
||||
<p>@((MarkupString)FixheaderLocalizer["AutoHeightP"].Value)</p>
|
||||
<div style="height: 300px;">
|
||||
<Table TItem="Foo" Items="@Items.Take(10)" ShowColumnList="true" ShowToolbar="true" ShowDefaultButtons="false" ShowRefresh="false"
|
||||
IsBordered="true" IsMultipleSelect="true" IsPagination="true" IsFixedHeader="true" AllowResizing="true">
|
||||
|
||||
@ -19,6 +19,11 @@ public partial class TablesFixedHeader
|
||||
[NotNull]
|
||||
private IStringLocalizer<Foo>? Localizer { get; set; }
|
||||
|
||||
[Inject]
|
||||
[NotNull]
|
||||
private IStringLocalizer<TablesFixedHeader>? FixheaderLocalizer { get; set; }
|
||||
|
||||
|
||||
/// <summary>
|
||||
/// OnInitialized 方法
|
||||
/// </summary>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user