Skip to content

Commit e81099b

Browse files
Lambert LeeArgoZhang
Lambert Lee
authored and
ArgoZhang
committed
!3753 doc(#I6AHY9): update table basic demos
* update tablebase demos
1 parent 8957f08 commit e81099b

10 files changed

Lines changed: 262 additions & 146 deletions

File tree

‎src/BootstrapBlazor.Shared/Data/Foo.cs‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
namespace BootstrapBlazor.Shared;
1010

1111
/// <summary>
12-
///
12+
/// Demo示例数据
13+
/// Demo sample data
1314
/// </summary>
1415
public class Foo
1516
{
@@ -84,7 +85,8 @@ public class Foo
8485
protected static readonly Random Random = new();
8586

8687
/// <summary>
87-
///
88+
/// 生成Foo类,随机数据
89+
/// Generate Foo class, random data
8890
/// </summary>
8991
/// <param name="localizer"></param>
9092
/// <returns></returns>
@@ -100,9 +102,10 @@ public class Foo
100102
};
101103

102104
/// <summary>
103-
///
105+
/// 生成Foo类,随机数据
106+
/// Generate Foo class, random data
104107
/// </summary>
105-
/// <returns></returns>
108+
/// <returns>返回一个Foo类的List，Return a List of Foo class</returns>
106109
public static List<Foo> GenerateFoo(IStringLocalizer<Foo> localizer, int count = 80) => Enumerable.Range(1, count).Select(i => new Foo()
107110
{
108111
Id = i,

‎src/BootstrapBlazor.Shared/Demos/Table/Base/TableBaseBordered.razor‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@inject IStringLocalizer<Foo> Localizer
2+
3+
<div>
4+
<Table TItem="Foo" Items="@Items.Take(3)" IsBordered="true">
5+
<TableColumns>
6+
<TableColumn @bind-Field="@context.DateTime" Width="180" />
7+
<TableColumn @bind-Field="@context.Name" />
8+
<TableColumn @bind-Field="@context.Address" />
9+
</TableColumns>
10+
</Table>
11+
</div>
12+
13+
@code {
14+
/// <summary>
15+
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
16+
/// Foo class is used for Demo test, please download the source code if necessary
17+
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
18+
/// </summary>
19+
[NotNull]
20+
private List<Foo>? Items { get; set; }
21+
22+
/// <summary>
23+
/// OnInitialized
24+
/// </summary>
25+
protected override void OnInitialized()
26+
{
27+
base.OnInitialized();
28+
//获取随机数据
29+
//Get random data
30+
Items = Foo.GenerateFoo(Localizer);
31+
}
32+
}

‎src/BootstrapBlazor.Shared/Demos/Table/Base/TableBaseHeaderStyle.razor‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
@inject IStringLocalizer<Foo> Localizer
2+
@inject IStringLocalizer<TableBaseHeaderStyle> TablesLocalizer
3+
4+
<div>
5+
<div class="code-label"><code>Light</code> @TablesLocalizer["TableBaseHeaderStyleMode"]</div>
6+
<Table TItem="Foo" Items="@Items.Take(3)" HeaderStyle="TableHeaderStyle.Light" IsBordered="true">
7+
<TableColumns>
8+
<TableColumn @bind-Field="@context.DateTime" Width="180" />
9+
<TableColumn @bind-Field="@context.Name" />
10+
<TableColumn @bind-Field="@context.Address" />
11+
</TableColumns>
12+
</Table>
13+
<div class="code-label mt-3"><code>Dark</code> @TablesLocalizer["TableBaseHeaderStyleMode"]</div>
14+
<Table TItem="Foo" Items="@Items.Take(3)" HeaderStyle="TableHeaderStyle.Dark" IsBordered="true">
15+
<TableColumns>
16+
<TableColumn @bind-Field="@context.DateTime" Width="180" />
17+
<TableColumn @bind-Field="@context.Name" />
18+
<TableColumn @bind-Field="@context.Address" />
19+
</TableColumns>
20+
</Table>
21+
</div>
22+
23+
@code {
24+
/// <summary>
25+
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
26+
/// Foo class is used for Demo test, please download the source code if necessary
27+
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
28+
/// </summary>
29+
[NotNull]
30+
private List<Foo>? Items { get; set; }
31+
32+
/// <summary>
33+
/// OnInitialized
34+
/// </summary>
35+
protected override void OnInitialized()
36+
{
37+
base.OnInitialized();
38+
//获取随机数据
39+
//Get random data
40+
Items = Foo.GenerateFoo(Localizer);
41+
}
42+
}

‎src/BootstrapBlazor.Shared/Demos/Table/Base/TableBaseNormal.razor‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
@inject IStringLocalizer<Foo> Localizer
2+
@inject IStringLocalizer<TableBaseNormal> TablesLocalizer
3+
4+
<div>
5+
<Button Icon="fa-solid fa-arrows-rotate" Text="@RefreshText" OnClick="OnClick" class="my-2" />
6+
<Table TItem="Foo" Items="@Items.Take(3)">
7+
<TableColumns>
8+
<TableColumn @bind-Field="@context.DateTime" Width="180" />
9+
<TableColumn @bind-Field="@context.Name" />
10+
<TableColumn @bind-Field="@context.Address" />
11+
</TableColumns>
12+
</Table>
13+
</div>
14+
15+
@code {
16+
/// <summary>
17+
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
18+
/// Foo class is used for Demo test, please download the source code if necessary
19+
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
20+
/// </summary>
21+
[NotNull]
22+
private List<Foo>? Items { get; set; }
23+
24+
[NotNull]
25+
private string? RefreshText { get; set; }
26+
27+
/// <summary>
28+
/// OnInitialized
29+
/// </summary>
30+
protected override void OnInitialized()
31+
{
32+
base.OnInitialized();
33+
//获取随机数据
34+
//Get random data
35+
Items = Foo.GenerateFoo(Localizer);
36+
37+
RefreshText ??= TablesLocalizer["TableBaseNormalRefreshText"];
38+
}
39+
40+
private void OnClick()
41+
{
42+
Items = Foo.GenerateFoo(Localizer);
43+
}
44+
}

‎src/BootstrapBlazor.Shared/Demos/Table/Base/TableBaseSize.razor‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@inject IStringLocalizer<Foo> Localizer
2+
3+
<div>
4+
<Table TItem="Foo" Items="@Items.Take(3)" IsBordered="true" IsStriped="true" TableSize="TableSize.Compact">
5+
<TableColumns>
6+
<TableColumn @bind-Field="@context.DateTime" Width="180" Filterable="true" Sortable="true" />
7+
<TableColumn @bind-Field="@context.Name" Filterable="true" />
8+
<TableColumn @bind-Field="@context.Address" Sortable="true" />
9+
</TableColumns>
10+
</Table>
11+
</div>
12+
13+
@code {
14+
/// <summary>
15+
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
16+
/// Foo class is used for Demo test, please download the source code if necessary
17+
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
18+
/// </summary>
19+
[NotNull]
20+
private List<Foo>? Items { get; set; }
21+
22+
/// <summary>
23+
/// OnInitialized
24+
/// </summary>
25+
protected override void OnInitialized()
26+
{
27+
base.OnInitialized();
28+
//获取随机数据
29+
//Get random data
30+
Items = Foo.GenerateFoo(Localizer);
31+
}
32+
}

‎src/BootstrapBlazor.Shared/Demos/Table/Base/TableBaseStriped.razor‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@inject IStringLocalizer<Foo> Localizer
2+
3+
<div>
4+
<Table TItem="Foo" Items="@Items.Take(3)" IsStriped="true">
5+
<TableColumns>
6+
<TableColumn @bind-Field="@context.DateTime" Width="180" />
7+
<TableColumn @bind-Field="@context.Name" />
8+
<TableColumn @bind-Field="@context.Address" />
9+
</TableColumns>
10+
</Table>
11+
</div>
12+
13+
@code {
14+
/// <summary>
15+
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
16+
/// Foo class is used for Demo test, please download the source code if necessary
17+
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
18+
/// </summary>
19+
[NotNull]
20+
private List<Foo>? Items { get; set; }
21+
22+
/// <summary>
23+
/// OnInitialized
24+
/// </summary>
25+
protected override void OnInitialized()
26+
{
27+
base.OnInitialized();
28+
//获取随机数据
29+
//Get random data
30+
Items = Foo.GenerateFoo(Localizer);
31+
}
32+
}

‎src/BootstrapBlazor.Shared/Locales/en.json‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4943,31 +4943,29 @@
49434943
"DynamicIntro": "Data source is <code>DataTable</code>"
49444944
},
49454945
"BootstrapBlazor.Shared.Samples.Table.Tables": {
4946-
"RefreshText": "Refresh",
49474946
"ButtonAddColumnText": "Add Column",
49484947
"ButtonRemoveColumnText": "Remove Column",
4949-
"TableTitle": "Table",
4950-
"H4": "It is used to display multiple pieces of data with similar structure. You can sort, filter, compare or other user-defined operations on the data.",
4951-
"TableP1": "The <code> Table </code> component already supports mobile terminal adaptation. When the screen is smaller than the <code> rendermoderesponsewidth </code> set value, the component will be rendered as a card for easy viewing of data, and its default value is <code> 768 </code>",
4952-
"TableP2": "<code>Table</code> component has a <code> rendermode </code> attribute. Its default value is <code> auto </code> and other values are defined as follows",
4953-
"TableLi1": "<code>Auto</code>: Use <code> cardview </code> mode when the screen is smaller than 768px, otherwise use <code> Table </code> mode",
4954-
"TableLi2": "<code>Table</code>: Table rendering mode, using <code> table </code> elements for data rendering, suitable for viewing data in a wide screen",
4955-
"TableLi3": "<code>CardView</code>：Card rendering mode, using <code> div </code> elements for data rendering, which is suitable for viewing data on a narrow screen",
4956-
"TableP3": "<code>Table</code> component has a <code> usecomponentwidth </code> attribute. Its default value is <code> false </code>, which means that the <code> window </code> width is used for judgment. When the setting value is <code> true </code>, it means that the component's own width is used for judgment",
4957-
"NormalTitle": "Basic table",
4958-
"NormalIntro": "Basic table presentation usage",
4959-
"NormalDiv": "Update data source when clicking button <code> items </code> component <code> Table </code> display data is automatically updated",
4960-
"StripedTitle": "Tables with zebra stripes",
4961-
"StripedIntro": "Using a table with zebra stripes, it is easier to distinguish data from different rows. Just set <code> istriped = true </code>",
4962-
"BorderedTitle": "Bordered tables",
4963-
"BorderedIntro": "Increase the effect of table frame by setting <code> isbordered </code> attribute",
4964-
"SizeTitle": "Compact tables",
4965-
"SizeIntro": "Set the <code> tablesize </code> attribute to make the gap in the table smaller and suitable for big data display",
4966-
"SizeP": "<code> Tablesize </code> is an enumeration type of table size, the default value is <code> normal </code>, and the compact value is <code> compact </code>",
4967-
"HeaderStyleTitle": "Header style",
4968-
"HeaderStyleIntro": "By setting <code> headerstyle </code> Properties",
4969-
"HeaderStylep": "<code> Headerstyle </code> is the table header style, and the default value is <code> none </code>",
4970-
"HeaderStyleMode": "Pattern",
4948+
"TableBaseTitle": "Table",
4949+
"TableBaseDescription": "It is used to display multiple pieces of data with similar structure. You can sort, filter, compare or other user-defined operations on the data.",
4950+
"TableBaseExplain1": "The <code> Table </code> component already supports mobile terminal adaptation. When the screen is smaller than the <code> rendermoderesponsewidth </code> set value, the component will be rendered as a card for easy viewing of data, and its default value is <code> 768 </code>",
4951+
"TableBaseExplain2": "<code>Table</code> component has a <code> rendermode </code> attribute. Its default value is <code> auto </code> and other values are defined as follows",
4952+
"TableBaseTips1": "<code>Auto</code>: Use <code> cardview </code> mode when the screen is smaller than 768px, otherwise use <code> Table </code> mode",
4953+
"TableBaseTips2": "<code>Table</code>: Table rendering mode, using <code> table </code> elements for data rendering, suitable for viewing data in a wide screen",
4954+
"TableBaseTips3": "<code>CardView</code>：Card rendering mode, using <code> div </code> elements for data rendering, which is suitable for viewing data on a narrow screen",
4955+
"TableBaseExplain3": "<code>Table</code> component has a <code> usecomponentwidth </code> attribute. Its default value is <code> false </code>, which means that the <code> window </code> width is used for judgment. When the setting value is <code> true </code>, it means that the component's own width is used for judgment",
4956+
"TableBaseNormalTitle": "Basic table",
4957+
"TableBaseNormalIntro": "Basic table presentation usage",
4958+
"TableBaseNormalDescription": "Update data source when clicking button <code> items </code> component <code> Table </code> display data is automatically updated",
4959+
"TableBaseStripedTitle": "Tables with zebra stripes",
4960+
"TableBaseStripedIntro": "Using a table with zebra stripes, it is easier to distinguish data from different rows. Just set <code> istriped = true </code>",
4961+
"TableBaseBorderedTitle": "Bordered tables",
4962+
"TableBaseBorderedIntro": "Increase the effect of table frame by setting <code> isbordered </code> attribute",
4963+
"TableBaseSizeTitle": "Compact tables",
4964+
"TableBaseSizeIntro": "Set the <code> tablesize </code> attribute to make the gap in the table smaller and suitable for big data display",
4965+
"TableBaseSizeDescription": "<code> Tablesize </code> is an enumeration type of table size, the default value is <code> normal </code>, and the compact value is <code> compact </code>",
4966+
"TableBaseHeaderStyleTitle": "Header style",
4967+
"TableBaseHeaderStyleIntro": "By setting <code> headerstyle </code> Properties",
4968+
"TableBaseHeaderStyleDescription": "<code> Headerstyle </code> is the table header style, and the default value is <code> none </code>",
49714969
"AttributeTitle": "Table Attribute",
49724970
"TableSizeAttr": "Table Size",
49734971
"HeaderStyleAttr": "Table Header Style",
@@ -5117,6 +5115,12 @@
51175115
"PageInfoTemplateAttr": "The template for custom page info",
51185116
"PageInfoTextAttr": "Pagination label text"
51195117
},
5118+
"BootstrapBlazor.Shared.Demos.Table.Base.TableBaseNormal": {
5119+
"TableBaseNormalRefreshText": "Refresh"
5120+
},
5121+
"BootstrapBlazor.Shared.Demos.Table.Base.TableBaseHeaderStyle": {
5122+
"TableBaseHeaderStyleMode": "Pattern"
5123+
},
51205124
"BootstrapBlazor.Shared.Samples.Table.TablesColumn": {
51215125
"Title": "Table Column",
51225126
"H4": "Used to display multiple pieces of data with similar structures, data can be sorted, filtered, compared or other custom operations.",

‎src/BootstrapBlazor.Shared/Locales/zh.json‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4972,31 +4972,29 @@
49724972
"DynamicIntro": "数据源为 <code>DataTable</code>"
49734973
},
49744974
"BootstrapBlazor.Shared.Samples.Table.Tables": {
4975-
"RefreshText": "刷新",
49764975
"ButtonAddColumnText": "增加列",
49774976
"ButtonRemoveColumnText": "移除列",
4978-
"TableTitle": "Table 表格",
4979-
"H4": "用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。",
4980-
"TableP1": "<code>Table</code> 组件已经支持移动端适配，当屏幕小于 <code>RenderModeResponsiveWidth</code> 设定值时，组件渲染成卡片式方便查看数据，其默认值为 <code>768</code>",
4981-
"TableP2": "<code>Table</code> 组件有一个 <code>RenderMode</code> 属性，其默认值为 <code>Auto</code> 其他值定义如下",
4982-
"TableLi1": "<code>Auto</code>: 当屏幕小于 768px 时使用 <code>CardView</code> 模式，否则使用 <code>Table</code> 模式",
4983-
"TableLi2": "<code>Table</code>: 表格渲染模式，使用 <code>table</code> 元素进行数据渲染，适合宽屏幕下查看数据",
4984-
"TableLi3": "<code>CardView</code>：卡片式渲染模式，使用 <code>div</code> 元素进行数据渲染，适合窄屏幕下查看数据",
4985-
"TableP3": "<code>Table</code> 组件有一个 <code>UseComponentWidth</code> 属性，其默认值为 <code>false</code>，表示使用 <code>window</code> 宽度来进行判断，当设置值为 <code>true</code> 时，表示使用组件自身宽度进行判断",
4986-
"NormalTitle": "基础表格",
4987-
"NormalIntro": "基础的表格展示用法。",
4988-
"NormalDiv": "点击按钮时更新数据源 <code>Items</code> 组件 <code>Table</code> 显示数据自动更新",
4989-
"StripedTitle": "带斑马纹表格",
4990-
"StripedIntro": "使用带斑马纹的表格，可以更容易区分出不同行的数据。设置 <code>IsStriped=true</code> 即可",
4991-
"BorderedTitle": "带边框表格",
4992-
"BorderedIntro": "通过设置 <code>IsBordered</code> 属性，增加表格表框效果",
4993-
"SizeTitle": "紧凑型表格",
4994-
"SizeIntro": "通过设置 <code>TableSize</code> 属性，设定表格内间隙变小适合大数据展示",
4995-
"SizeP": "<code>TableSize</code> 为表格大小枚举类型，默认值为 <code>Normal</code>，紧奏型值为 <code>Compact</code>",
4996-
"HeaderStyleTitle": "表头样式",
4997-
"HeaderStyleIntro": "通过设置 <code>HeaderStyle</code> 属性",
4998-
"HeaderStyleP1": "<code>HeaderStyle</code> 为表格表头样式，默认值为 <code>None</code>",
4999-
"HeaderStyleMode": "模式",
4977+
"TableBaseTitle": "Table 表格",
4978+
"TableBaseDescription": "用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。",
4979+
"TableBaseExplain1": "<code>Table</code> 组件已经支持移动端适配，当屏幕小于 <code>RenderModeResponsiveWidth</code> 设定值时，组件渲染成卡片式方便查看数据，其默认值为 <code>768</code>",
4980+
"TableBaseExplain2": "<code>Table</code> 组件有一个 <code>RenderMode</code> 属性，其默认值为 <code>Auto</code> 其他值定义如下",
4981+
"TableBaseTips1": "<code>Auto</code>: 当屏幕小于 768px 时使用 <code>CardView</code> 模式，否则使用 <code>Table</code> 模式",
4982+
"TableBaseTips2": "<code>Table</code>: 表格渲染模式，使用 <code>table</code> 元素进行数据渲染，适合宽屏幕下查看数据",
4983+
"TableBaseTips3": "<code>CardView</code>：卡片式渲染模式，使用 <code>div</code> 元素进行数据渲染，适合窄屏幕下查看数据",
4984+
"TableBaseExplain3": "<code>Table</code> 组件有一个 <code>UseComponentWidth</code> 属性，其默认值为 <code>false</code>，表示使用 <code>window</code> 宽度来进行判断，当设置值为 <code>true</code> 时，表示使用组件自身宽度进行判断",
4985+
"TableBaseNormalTitle": "基础表格",
4986+
"TableBaseNormalIntro": "基础的表格展示用法。",
4987+
"TableBaseNormalDescription": "点击按钮时更新数据源 <code>Items</code> 组件 <code>Table</code> 显示数据自动更新",
4988+
"TableBaseStripedTitle": "带斑马纹表格",
4989+
"TableBaseStripedIntro": "使用带斑马纹的表格，可以更容易区分出不同行的数据。设置 <code>IsStriped=true</code> 即可",
4990+
"TableBaseBorderedTitle": "带边框表格",
4991+
"TableBaseBorderedIntro": "通过设置 <code>IsBordered</code> 属性，增加表格表框效果",
4992+
"TableBaseSizeTitle": "紧凑型表格",
4993+
"TableBaseSizeIntro": "通过设置 <code>TableSize</code> 属性，设定表格内间隙变小适合大数据展示",
4994+
"TableBaseSizeDescription": "<code>TableSize</code> 为表格大小枚举类型，默认值为 <code>Normal</code>，紧奏型值为 <code>Compact</code>",
4995+
"TableBaseHeaderStyleTitle": "表头样式",
4996+
"TableBaseHeaderStyleIntro": "通过设置 <code>HeaderStyle</code> 属性",
4997+
"TableBaseHeaderStyleDescription": "<code>HeaderStyle</code> 为表格表头样式，默认值为 <code>None</code>",
50004998
"AttributeTitle": "Table 属性",
50014999
"TableSizeAttr": "表格大小",
50025000
"HeaderStyleAttr": "表格 Header 样式",
@@ -5147,6 +5145,12 @@
51475145
"PageInfoTemplateAttr": "分页详细信息自定义组件",
51485146
"PageInfoTextAttr": "分页信息显示文字"
51495147
},
5148+
"BootstrapBlazor.Shared.Demos.Table.Base.TableBaseNormal": {
5149+
"TableBaseNormalRefreshText": "刷新"
5150+
},
5151+
"BootstrapBlazor.Shared.Demos.Table.Base.TableBaseHeaderStyle": {
5152+
"TableBaseHeaderStyleMode": "模式"
5153+
},
51505154
"BootstrapBlazor.Shared.Samples.Table.TablesColumn": {
51515155
"Title": "Table 表格",
51525156
"H4": "用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。",

0 commit comments

Comments
 (0)