Skip to content

Commit 790d9ef

Browse files
Lambert LeeArgoZhang
Lambert Lee
authored and
ArgoZhang
committed
!3775 doc(#I6B4RQ): update TableWrap demos
* update TablesWrap demos
1 parent e2bbfd0 commit 790d9ef

9 files changed

Lines changed: 329 additions & 201 deletions

File tree

‎src/BootstrapBlazor.Shared/Demos/Table/TablesWrap/TablesWrapCustomCell.razor‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
@inject IStringLocalizer<TablesWrapCustomCell> Localizer
2+
@inject IStringLocalizer<Foo> LocalizerFoo
3+
4+
<div>
5+
<Table TItem="Foo" IsBordered="true" IsStriped="true" Items="@CellItems" AllowResizing="true">
6+
<TableColumns>
7+
<TableColumn @bind-Field="@context.DateTime" Width="180" Text="@Localizer["TablesWrapCustomCellColumHeaderText_DateTime"]" />
8+
<TableColumn @bind-Field="@context.Name" Text="@Localizer["TablesWrapCustomCellColumHeaderText_Name"]" />
9+
<TableColumn @bind-Field="@context.Address" Text="@Localizer["TablesWrapCustomCellColumHeaderText_Address"]" Width="200" TextEllipsis="true" ShowTips="true" />
10+
<TableColumn @bind-Field="@context.Education" />
11+
<TableColumn @bind-Field="@context.Count" />
12+
<TableColumn @bind-Field="@context.Complete">
13+
<Template Context="v">
14+
<div>
15+
<div>@Localizer["TablesWrapCustomCellTemplate_State"]:@v.Value</div>
16+
<div>@Localizer["TablesWrapCustomCellTemplate_Time"]:@v.Row.DateTime</div>
17+
</div>
18+
</Template>
19+
</TableColumn>
20+
</TableColumns>
21+
</Table>
22+
</div>
23+
24+
@code {
25+
/// <summary>
26+
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
27+
/// Foo class is used for Demo test, please download the source code if necessary
28+
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
29+
/// </summary>
30+
[NotNull]
31+
private IEnumerable<Foo>? CellItems { get; set; }
32+
33+
/// <summary>
34+
/// OnInitialized
35+
/// </summary>
36+
protected override void OnInitialized()
37+
{
38+
base.OnInitialized();
39+
40+
CellItems = Foo.GenerateFoo(LocalizerFoo, 4);
41+
}
42+
}

‎src/BootstrapBlazor.Shared/Demos/Table/TablesWrap/TablesWrapDataResizing.razor‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
@inject IStringLocalizer<TablesWrapDataResizing> Localizer
2+
@inject IStringLocalizer<Foo> LocalizerFoo
3+
4+
<div>
5+
<Table TItem="Foo" IsBordered="true" IsStriped="true" AllowResizing="true" IsPagination="true"
6+
OnQueryAsync="OnQueryAsync" PageItemsSource="new int[] {4, 8, 20}">
7+
<TableColumns>
8+
<TableColumn @bind-Field="@context.DateTime" Width="180" Text="@Localizer["TablesWrapDataResizingColumHeaderText_DateTime"]" />
9+
<TableColumn @bind-Field="@context.Name" Text="@Localizer["TablesWrapDataResizingColumHeaderText_Name"]" />
10+
<TableColumn @bind-Field="@context.Address" Text="@Localizer["TablesWrapDataResizingColumHeaderText_Address"]" Width="200" TextEllipsis="true" ShowTips="true" />
11+
<TableColumn @bind-Field="@context.Education" />
12+
<TableColumn @bind-Field="@context.Count" />
13+
<TableColumn @bind-Field="@context.Complete" />
14+
</TableColumns>
15+
</Table>
16+
</div>
17+
18+
@code {
19+
/// <summary>
20+
/// Foo 类为Demo测试用，如有需要请自行下载源码查阅
21+
/// Foo class is used for Demo test, please download the source code if necessary
22+
/// https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/main/src/BootstrapBlazor.Shared/Data/Foo.cs
23+
/// </summary>
24+
[NotNull]
25+
private IEnumerable<Foo>? CellItems { get; set; }
26+
27+
/// <summary>
28+
/// OnInitialized
29+
/// </summary>
30+
protected override void OnInitialized()
31+
{
32+
base.OnInitialized();
33+
34+
CellItems = Foo.GenerateFoo(LocalizerFoo, 4);
35+
}
36+
37+
private Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
38+
{
39+
var items = Foo.GenerateFoo(LocalizerFoo);
40+
41+
// 设置记录总数
42+
var total = items.Count;
43+
44+
// 内存分页
45+
items = items.Skip((options.PageIndex - 1) * options.PageItems).Take(options.PageItems).ToList();
46+
47+
return Task.FromResult(new QueryData<Foo>()
48+
{
49+
Items = items,
50+
TotalCount = total,
51+
IsSorted = true,
52+
IsFiltered = true,
53+
IsSearch = true
54+
});
55+
}
56+
}

‎src/BootstrapBlazor.Shared/Demos/Table/TablesWrap/TablesWrapHeaderTextWrap.razor‎

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

‎src/BootstrapBlazor.Shared/Demos/Table/TablesWrap/TablesWrapLongData.razor‎

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

‎src/BootstrapBlazor.Shared/Demos/Table/TablesWrap/TablesWrapNormal.razor‎

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

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

Lines changed: 50 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -5344,46 +5344,56 @@
53445344
"P21": "In this example change the indent width to <code>8px</code>"
53455345
},
53465346
"BootstrapBlazor.Shared.Samples.Table.TablesWrap": {
5347-
"H1": "Table wrapping example",
5348-
"H2": "When the content of the header or the cell in the row is too long, the effect of omitting, wrapping, etc. can be realized by changing the style",
5349-
"P1": "<b>Note:</b>Because the <code>Table</code> component has realized the function of adapting to the mobile terminal, this demo needs to be viewed on the computer side",
5350-
"P2": "Example of super long header",
5351-
"P3": "In some special cases, the header may be relatively long, and the header needs to be controlled within a fixed width. When the mouse moves over the header, <code>Tooltip</code> is displayed to display the complete header information.",
5352-
"P4": "You can drag the window size, and the horizontal scroll bar will automatically appear when the window is too small",
5353-
"P5": "I'm a super long schedule head",
5354-
"P6": "I am a super long name header",
5355-
"P7": "I am a super long address header",
5356-
"P8": "The header is too long to wrap",
5357-
"P9": "Wrap the super long header by setting <code>HeaderTextWrap</code>",
5358-
"P10": "You can drag the window size. When the window is too small, the horizontal scroll bar will automatically appear, and the header will automatically wrap.",
5359-
"P11": "I'm a super long schedule head",
5360-
"P12": "I am a super long name header",
5361-
"P13": "I am a super long address header",
5362-
"P14": "Example of extra-long wrapping of cell data",
5363-
"P15": "In some special cases, the cell content may be long and need to be wrapped",
5364-
"P16": "You can drag the window size, the <b>address</b> column will be automatically wrapped when the window is too small",
5365-
"P17": "Enable word wrapping by setting <code>TextWrap</code>",
5366-
"P18": "<b>Note:</b> It is recommended to use <code>Width</code> to set the column width",
5367-
"P19": "Time",
5368-
"P20": "Name",
5369-
"P21": "Address",
5370-
"P22": "Example of over-length omission of cell data",
5371-
"P23": "In some special cases, the content of the cell may be relatively long, and it needs to be omitted.",
5372-
"P24": "You can drag the window size, and the <b>address</b> column will be automatically omitted if the window is too small",
5373-
"P25": "Enable text ellipsis by setting <code>TextEllipsis</code>",
5374-
"P26": "<b>Note:</b> It is recommended to use <code>Width</code> to set the column width. If the column width is not set, it will automatically use 200px width inside",
5375-
"P27": "After the text in the cell is omitted, you can use the <code>ShowTips</code> property to control whether to display all the text on mouse hover, the default is <code>false</code>",
5376-
"P28": "Drag the address column, the cell display content will automatically increase and decrease",
5377-
"P29": "time",
5378-
"P30": "Name",
5379-
"P31": "Address",
5380-
"P32": "Custom in-cell typography",
5381-
"P33": "Use templates for special layout of in-cell data",
5382-
"P34": "time",
5383-
"P35": "Name",
5384-
"P36": "Address",
5385-
"P37": "state",
5386-
"P38": "time"
5347+
"TablesWrapTitile": "Table wrapping example",
5348+
"TablesWrapDescription": "When the content of the header or the cell in the row is too long, the effect of omitting, wrapping, etc. can be realized by changing the style",
5349+
"TablesWrapTip": "<b>Note:</b>Because the <code>Table</code> component has realized the function of adapting to the mobile terminal, this demo needs to be viewed on the computer side",
5350+
"TablesWrapNormalTitle": "Example of super long header",
5351+
"TablesWrapNormalIntro": "In some special cases, the header may be relatively long, and the header needs to be controlled within a fixed width. When the mouse moves over the header, <code>Tooltip</code> is displayed to display the complete header information.",
5352+
"TablesWrapNormalDescription": "You can drag the window size, and the horizontal scroll bar will automatically appear when the window is too small",
5353+
"TablesWrapHeaderTextWrapTitle": "The header is too long to wrap",
5354+
"TablesWrapHeaderTextWrapIntro": "Wrap the super long header by setting <code>HeaderTextWrap</code>",
5355+
"TablesWrapHeaderTextWrapDescription": "You can drag the window size. When the window is too small, the horizontal scroll bar will automatically appear, and the header will automatically wrap.",
5356+
"TablesWrapLongDataTitle": "Example of extra-long wrapping of cell data",
5357+
"TablesWrapLongDataIntro": "In some special cases, the cell content may be long and need to be wrapped",
5358+
"TablesWrapLongDataTips1": "You can drag the window size, the <b>address</b> column will be automatically wrapped when the window is too small",
5359+
"TablesWrapLongDataTips2": "Enable word wrapping by setting <code>TextWrap</code>",
5360+
"TablesWrapLongDataTips3": "<b>Note:</b> It is recommended to use <code>Width</code> to set the column width",
5361+
"TablesWrapDataResizingTitle": "Example of over-length omission of cell data",
5362+
"TablesWrapDataResizingIntro": "In some special cases, the content of the cell may be relatively long, and it needs to be omitted.",
5363+
"TablesWrapDataResizingTips1": "You can drag the window size, and the <b>address</b> column will be automatically omitted if the window is too small",
5364+
"TablesWrapDataResizingTips2": "Enable text ellipsis by setting <code>TextEllipsis</code>",
5365+
"TablesWrapDataResizingTips3": "<b>Note:</b> It is recommended to use <code>Width</code> to set the column width. If the column width is not set, it will automatically use 200px width inside",
5366+
"TablesWrapDataResizingTips4": "After the text in the cell is omitted, you can use the <code>ShowTips</code> property to control whether to display all the text on mouse hover, the default is <code>false</code>",
5367+
"TablesWrapDataResizingTips5": "Drag the address column, the cell display content will automatically increase and decrease",
5368+
"TablesWrapCustomCellTitle": "Custom in-cell typography",
5369+
"TablesWrapCustomCellIntro": "Use templates for special layout of in-cell data",
5370+
},
5371+
"BootstrapBlazor.Shared.Demos.Table.TablesWrap.TablesWrapNormal": {
5372+
"TablesWrapNormalColumHeaderText_DateTime": "I'm a super long schedule head",
5373+
"TablesWrapNormalColumHeaderText_Name": "I am a super long name header",
5374+
"TablesWrapNormalColumHeaderText_Address": "I am a super long address header"
5375+
},
5376+
"BootstrapBlazor.Shared.Demos.Table.TablesWrap.TablesWrapHeaderTextWrap": {
5377+
"TablesWrapHeaderTextWrapColumHeaderText_DateTime": "I'm a super long schedule head",
5378+
"TablesWrapHeaderTextWrapColumHeaderText_Name": "I am a super long name header",
5379+
"TablesWrapHeaderTextWrapColumHeaderText_Address": "I am a super long address header"
5380+
},
5381+
"BootstrapBlazor.Shared.Demos.Table.TablesWrap.TablesWrapLongData": {
5382+
"TablesWrapLongDataColumHeaderText_DateTime": "Time",
5383+
"TablesWrapLongDataColumHeaderText_Name": "Name",
5384+
"TablesWrapLongDataColumHeaderText_Address": "Address"
5385+
},
5386+
"BootstrapBlazor.Shared.Demos.Table.TablesWrap.TablesWrapDataResizing": {
5387+
"TablesWrapDataResizingColumHeaderText_DateTime": "time",
5388+
"TablesWrapDataResizingColumHeaderText_Name": "Name",
5389+
"TablesWrapDataResizingColumHeaderText_Address": "Address"
5390+
},
5391+
"BootstrapBlazor.Shared.Demos.Table.TablesWrap.TablesWrapCustomCell": {
5392+
"TablesWrapCustomCellColumHeaderText_DateTime": "time",
5393+
"TablesWrapCustomCellColumHeaderText_Name": "Name",
5394+
"TablesWrapCustomCellColumHeaderText_Address": "Address",
5395+
"TablesWrapCustomCellTemplate_State": "state",
5396+
"TablesWrapCustomCellTemplate_Time": "time"
53875397
},
53885398
"BootstrapBlazor.Shared.Samples.Table.TablesTracking": {
53895399
"H1": "Table table",

0 commit comments

Comments
 (0)