test/ant-design-blazor
1
0
Fork 0
mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-12-04 04:58:05 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

feat(module: tabs): add OnClose event and TabTemplate (#1698)

Browse Source 
* feat(module: tab): add onclose event and tabtemplate

* add tests
This commit is contained in:
James Yeung 2021-07-02 01:16:53 +08:00 committed by GitHub
parent 1d3a13e57e
commit 3a295f5c54
69 changed files with 382 additions and 403 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
components/tabs/TabPane.razor
View File

@ -12,20 +12,27 @@
var onclickStopPropagation = !IsActive; var onclickStopPropagation = !IsActive;
<div @key="Pane?.Key" <div @key="Pane?.Key"
@ref="Pane.TabBar" @ref="Pane.TabBar"
@onclick:stopPropagation="@onclickStopPropagation" @onclick:stopPropagation="@onclickStopPropagation"
@onclick="@(e => Parent.HandleTabClick(Pane))" @onclick="@(e => Parent.HandleTabClick(Pane))"
@ondragover:preventDefault="@ondragoverPreventDefault" @ondragover:preventDefault="@ondragoverPreventDefault"
@ondragstart="@(e => Parent.HandleDragStart(e, Pane))" @ondragstart="@(e => Parent.HandleDragStart(e, Pane))"
@ondrop="@(_ => Parent.HandleDrop(Pane))" @ondrop="@(_ => Parent.HandleDrop(Pane))"
aria-controls="@($"rc-tabs-{Id}-tab-{Key}")" aria-controls="@($"rc-tabs-{Id}-tab-{Key}")"
aria-selected="@(Pane?.IsActive)" aria-selected="@(Pane?.IsActive)"
class="@Pane.ClassMapper.Class" class="@Pane.ClassMapper.Class"
draggable="@Parent.Draggable.ToString()" draggable="@Parent.Draggable.ToString()"
id="@($"rc-tabs-{Id}-tab-{Key}")" id="@($"rc-tabs-{Id}-tab-{Key}")"
ondragover="event.preventDefault();"> ondragover="event.preventDefault();">
<div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0"> <div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0">
@Tab @if (TabTemplate != null)
{
@TabTemplate
}
else
{
@Tab
}
</div> </div>
@if (Parent.Type == TabType.EditableCard && Closable) @if (Parent.Type == TabType.EditableCard && Closable)
{ {
@ -42,12 +49,12 @@ else if (IsPane)
Pane.HasRendered = true; Pane.HasRendered = true;
<div @key="Pane?.Key" <div @key="Pane?.Key"
tabindex="@(IsActive ? "0" : "-1")" tabindex="@(IsActive ? "0" : "-1")"
class="ant-tabs-tabpane @(Pane.IsActive ? "ant-tabs-tabpane-active" : "")" class="ant-tabs-tabpane @(Pane.IsActive ? "ant-tabs-tabpane-active" : "")"
id="@($"rc-tabs-{Id}-panel-{Key}")" id="@($"rc-tabs-{Id}-panel-{Key}")"
role="tabpanel" aria-hidden="@(Pane.IsActive ? "false" : "true")" role="tabpanel" aria-hidden="@(Pane.IsActive ? "false" : "true")"
aria-labelledby="@($"rc-tabs-{Id}-panel-{Key}")" aria-labelledby="@($"rc-tabs-{Id}-panel-{Key}")"
style="@(Pane.IsActive ? "" : "display: none;")"> style="@(Pane.IsActive ? "" : "display: none;")">
@ChildContent @ChildContent
</div> </div>

11
components/tabs/TabPane.razor.cs
View File

@ -1,4 +1,8 @@
using Microsoft.AspNetCore.Components; // Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.
using Microsoft.AspNetCore.Components;
namespace AntDesign namespace AntDesign
{ {
@ -52,7 +56,10 @@ namespace AntDesign
/// Show text in <see cref="TabPane"/>'s head /// Show text in <see cref="TabPane"/>'s head
/// </summary> /// </summary>
[Parameter] [Parameter]
public RenderFragment Tab { get; set; } public string Tab { get; set; }
[Parameter]
public RenderFragment TabTemplate { get; set; }
[Parameter] [Parameter]
public RenderFragment ChildContent { get; set; } public RenderFragment ChildContent { get; set; }

62
components/tabs/Tabs.razor.cs
View File

@ -1,4 +1,8 @@
using System; // Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.
using System;
using System.Collections.Generic; using System.Collections.Generic;
using System.Linq; using System.Linq;
using System.Threading.Tasks; using System.Threading.Tasks;
@ -157,6 +161,13 @@ namespace AntDesign
[Parameter] [Parameter]
public Func<string, string, Task<bool>> OnEdit { get; set; } = (key, action) => Task.FromResult(true); public Func<string, string, Task<bool>> OnEdit { get; set; } = (key, action) => Task.FromResult(true);
/// <summary>
/// Callback when tab is closed
/// </summary>
[Parameter]
public EventCallback<string> OnClose { get; set; }
[Parameter] [Parameter]
public EventCallback OnAddClick { get; set; } public EventCallback OnAddClick { get; set; }
@ -232,49 +243,6 @@ namespace AntDesign
return base.SetParametersAsync(parameters); return base.SetParametersAsync(parameters);
} }
protected override void OnParametersSet()
{
base.OnParametersSet();
//if (Type == TabType.EditableCard && !HideAdd)
//{
// TabBarExtraContent = (b) =>
// {
// b.OpenComponent<Icon>(0);
// b.AddAttribute(1, "Type", "plus");
// b.AddAttribute(2, "class", $"{PrefixCls}-new-tab");
// b.AddAttribute(3, "onclick", EventCallback.Factory.Create(this, AddTabPane));
// b.CloseComponent();
// };
//}
//_barClassMapper.Clear()
// .Add($"{PrefixCls}-bar")
// .Add($"{PrefixCls}-{TabPosition}-bar")
// .Add($"{PrefixCls}-{Type}-bar")
// .If($"{PrefixCls}-{TabType.Card}-bar", () => Type == TabType.EditableCard)
// .If($"{PrefixCls}-large-bar", () => Size == TabSize.Large)
// .If($"{PrefixCls}-small-bar", () => Size == TabSize.Small);
//_prevClassMapper.Clear()
// .Add($"{PrefixCls}-tab-prev")
// .If($"{PrefixCls}-tab-btn-disabled", () => !_prevIconEnabled.HasValue || !_prevIconEnabled.Value)
// .If($"{PrefixCls}-tab-arrow-show", () => _prevIconEnabled.HasValue);
//_nextClassMapper.Clear()
// .Add($"{PrefixCls}-tab-next")
// .If($"{PrefixCls}-tab-btn-disabled", () => !_nextIconEnabled.HasValue || !_nextIconEnabled.Value)
// .If($"{PrefixCls}-tab-arrow-show", () => _nextIconEnabled.HasValue);
//_navClassMapper.Clear()
// .Add($"{PrefixCls}-nav-container")
// .If($"{PrefixCls}-nav-container-scrolling", () => _prevIconEnabled.HasValue || _nextIconEnabled.HasValue);
//_navStyle = "transform: translate3d(0px, 0px, 0px);";
_inkStyle = "left: 0px; width: 0px;";
//_contentStyle = "margin-" + (IsHorizontal ? "left" : "top") + ": 0;";
}
/// <summary> /// <summary>
/// Add <see cref="TabPane"/> to <see cref="Tabs"/> /// Add <see cref="TabPane"/> to <see cref="Tabs"/>
/// </summary> /// </summary>
@ -347,6 +315,12 @@ namespace AntDesign
} }
_needRefresh = true; _needRefresh = true;
if (OnClose.HasDelegate)
{
await OnClose.InvokeAsync(pane.Key);
}
StateHasChanged(); StateHasChanged();
} }
} }

4
site/AntDesign.Docs/Demos/Charts/Area/demo/Area_.razor
View File

@ -5,13 +5,13 @@
<Tabs ActiveKeyChanged="OnTabChanged"> <Tabs ActiveKeyChanged="OnTabChanged">
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<Area @ref="chart1" TItem="FireworksSalesItem" Config="config1" /> <Area @ref="chart1" TItem="FireworksSalesItem" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<Area @ref="chart2" TItem="SalesItem" Config="config2" /> <Area @ref="chart2" TItem="SalesItem" Config="config2" />
</ChildContent> </ChildContent>

2
site/AntDesign.Docs/Demos/Charts/Area/demo/PercentStackedArea_.razor
View File

@ -3,7 +3,7 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<PercentStackedArea Data="data1" Config="config1"/> <PercentStackedArea Data="data1" Config="config1"/>
</ChildContent> </ChildContent>

8
site/AntDesign.Docs/Demos/Charts/Area/demo/StackedArea_.razor
View File

@ -5,25 +5,25 @@
<Tabs ActiveKeyChanged="OnTabChanged"> <Tabs ActiveKeyChanged="OnTabChanged">
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<StackedArea @ref="chart1" TItem="OilItem" Config="config1" /> <StackedArea @ref="chart1" TItem="OilItem" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<StackedArea @ref="chart2" TItem="OilItem" Config="config2" /> <StackedArea @ref="chart2" TItem="OilItem" Config="config2" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3">
<Tab>示例3</Tab> <TabTemplate>示例3</TabTemplate>
<ChildContent> <ChildContent>
<StackedArea @ref="chart3" TItem="OilItem" Config="config3" /> <StackedArea @ref="chart3" TItem="OilItem" Config="config3" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="4"> <TabPane Key="4">
<Tab>示例4</Tab> <TabTemplate>示例4</TabTemplate>
<ChildContent> <ChildContent>
<StackedArea @ref="chart4" TItem="EmissionsItem" Config="config4" /> <StackedArea @ref="chart4" TItem="EmissionsItem" Config="config4" />
</ChildContent> </ChildContent>

8
site/AntDesign.Docs/Demos/Charts/Bar/demo/Bar_.razor
View File

@ -3,25 +3,25 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<Bar Data="data1" Config="config1"/> <Bar Data="data1" Config="config1"/>
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<Bar Data="data2" Config="config2"/> <Bar Data="data2" Config="config2"/>
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3">
<Tab>示例3</Tab> <TabTemplate>示例3</TabTemplate>
<ChildContent> <ChildContent>
<Bar Data="data3" Config="config3"/> <Bar Data="data3" Config="config3"/>
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="4"> <TabPane Key="4">
<Tab>示例4</Tab> <TabTemplate>示例4</TabTemplate>
<ChildContent> <ChildContent>
<Bar Data="data4" Config="config4"/> <Bar Data="data4" Config="config4"/>
</ChildContent> </ChildContent>

2
site/AntDesign.Docs/Demos/Charts/Bar/demo/GroupedBar_.razor
View File

@ -3,7 +3,7 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<GroupedBar Data="data1" Config="config1"/> <GroupedBar Data="data1" Config="config1"/>
</ChildContent> </ChildContent>

2
site/AntDesign.Docs/Demos/Charts/Bar/demo/PercentStackedBar_.razor
View File

@ -3,7 +3,7 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<PercentStackedBar Data="data1" Config="config1"/> <PercentStackedBar Data="data1" Config="config1"/>
</ChildContent> </ChildContent>

4
site/AntDesign.Docs/Demos/Charts/Bar/demo/RangeBar_.razor
View File

@ -3,13 +3,13 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<RangeBar Data="data1" Config="config1"/> <RangeBar Data="data1" Config="config1"/>
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<RangeBar Data="data2" Config="config2"/> <RangeBar Data="data2" Config="config2"/>
</ChildContent> </ChildContent>

4
site/AntDesign.Docs/Demos/Charts/Bar/demo/StackedBar_.razor
View File

@ -3,13 +3,13 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<StackedBar Data="data1" Config="config1"/> <StackedBar Data="data1" Config="config1"/>
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<StackedBar Data="data2" Config="config2"/> <StackedBar Data="data2" Config="config2"/>
</ChildContent> </ChildContent>

4
site/AntDesign.Docs/Demos/Charts/Bubble/demo/Bubble_.razor
View File

@ -4,14 +4,14 @@
<Tabs ActiveKeyChanged="OnTabChanged"> <Tabs ActiveKeyChanged="OnTabChanged">
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<Bubble @ref="chart1" Data="data1" Config="config1" /> <Bubble @ref="chart1" Data="data1" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<Bubble @ref="chart2" Data="data2" Config="config2" /> <Bubble @ref="chart2" Data="data2" Config="config2" />
</ChildContent> </ChildContent>

14
site/AntDesign.Docs/Demos/Charts/Bullet/demo/Bullet_.razor
View File

@ -3,49 +3,49 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<Bullet TItem="string" Config="config1" /> <Bullet TItem="string" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<Bullet TItem="string" Config="config2" OtherConfig="config2_1" /> <Bullet TItem="string" Config="config2" OtherConfig="config2_1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3">
<Tab>示例3</Tab> <TabTemplate>示例3</TabTemplate>
<ChildContent> <ChildContent>
<Bullet TItem="string" Config="config3" OtherConfig="config3_1" /> <Bullet TItem="string" Config="config3" OtherConfig="config3_1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="4"> <TabPane Key="4">
<Tab>示例4</Tab> <TabTemplate>示例4</TabTemplate>
<ChildContent> <ChildContent>
<Bullet TItem="string" Config="config4" OtherConfig="config4_1" /> <Bullet TItem="string" Config="config4" OtherConfig="config4_1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="5"> <TabPane Key="5">
<Tab>示例5</Tab> <TabTemplate>示例5</TabTemplate>
<ChildContent> <ChildContent>
<Bullet TItem="string" Config="config5" OtherConfig="config5_1" /> <Bullet TItem="string" Config="config5" OtherConfig="config5_1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="6"> <TabPane Key="6">
<Tab>示例6</Tab> <TabTemplate>示例6</TabTemplate>
<ChildContent> <ChildContent>
<Bullet TItem="string" Config="config6" /> <Bullet TItem="string" Config="config6" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="7"> <TabPane Key="7">
<Tab>示例7</Tab> <TabTemplate>示例7</TabTemplate>
<ChildContent> <ChildContent>
<Bullet TItem="string" Config="config7" OtherConfig="config7_1" /> <Bullet TItem="string" Config="config7" OtherConfig="config7_1" />
</ChildContent> </ChildContent>

2
site/AntDesign.Docs/Demos/Charts/Calendar/demo/Calendar_.razor
View File

@ -5,7 +5,7 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Calendar @ref="chart1" Data="data1" Config="config1" OtherConfig="otherConfig1"/> <AntDesign.Charts.Calendar @ref="chart1" Data="data1" Config="config1" OtherConfig="otherConfig1"/>
</ChildContent> </ChildContent>

14
site/AntDesign.Docs/Demos/Charts/Column/demo/Column_.razor
View File

@ -5,49 +5,49 @@
<Tabs ActiveKeyChanged="OnTabChanged"> <Tabs ActiveKeyChanged="OnTabChanged">
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Column Data="data1" Config="config1" /> <AntDesign.Charts.Column Data="data1" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Column Data="data2" Config="config2" /> <AntDesign.Charts.Column Data="data2" Config="config2" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3">
<Tab>示例3</Tab> <TabTemplate>示例3</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Column Data="data3" Config="config3" /> <AntDesign.Charts.Column Data="data3" Config="config3" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="4"> <TabPane Key="4">
<Tab>示例4</Tab> <TabTemplate>示例4</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Column Data="data4" Config="config4" /> <AntDesign.Charts.Column Data="data4" Config="config4" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="5"> <TabPane Key="5">
<Tab>示例5</Tab> <TabTemplate>示例5</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Column @ref="chart5" TItem="SalesItem" Config="config5" OtherConfig="config5_2" /> <AntDesign.Charts.Column @ref="chart5" TItem="SalesItem" Config="config5" OtherConfig="config5_2" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="6"> <TabPane Key="6">
<Tab>示例6</Tab> <TabTemplate>示例6</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Column @ref="chart6" TItem="SalesItem" Config="config6" OtherConfig="config6_2" /> <AntDesign.Charts.Column @ref="chart6" TItem="SalesItem" Config="config6" OtherConfig="config6_2" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="7"> <TabPane Key="7">
<Tab>示例7</Tab> <TabTemplate>示例7</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Column Data="data7" Config="config7" /> <AntDesign.Charts.Column Data="data7" Config="config7" />
</ChildContent> </ChildContent>

2
site/AntDesign.Docs/Demos/Charts/Column/demo/GroupedColumn_.razor
View File

@ -3,7 +3,7 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<GroupedColumn Data="data1" Config="config1"/> <GroupedColumn Data="data1" Config="config1"/>
</ChildContent> </ChildContent>

4
site/AntDesign.Docs/Demos/Charts/Column/demo/Histogram_.razor
View File

@ -3,14 +3,14 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<Histogram Data="data1" Config="config1" /> <Histogram Data="data1" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<Histogram Data="data2" Config="config2" /> <Histogram Data="data2" Config="config2" />
</ChildContent> </ChildContent>

2
site/AntDesign.Docs/Demos/Charts/Column/demo/PercentStackedColumn_.razor
View File

@ -3,7 +3,7 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<PercentStackedColumn Data="data1" Config="config1"/> <PercentStackedColumn Data="data1" Config="config1"/>
</ChildContent> </ChildContent>

4
site/AntDesign.Docs/Demos/Charts/Column/demo/RangedColumn_.razor
View File

@ -3,14 +3,14 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<RangeColumn Data="data1" Config="config1" /> <RangeColumn Data="data1" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<RangeColumn Data="data2" Config="config2" OtherConfig="config2_1" /> <RangeColumn Data="data2" Config="config2" OtherConfig="config2_1" />
</ChildContent> </ChildContent>

10
site/AntDesign.Docs/Demos/Charts/Column/demo/StackedColumn_.razor
View File

@ -3,35 +3,35 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<StackedColumn Data="data1" Config="config1" /> <StackedColumn Data="data1" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<StackedColumn Data="data2" Config="config2" OtherConfig="config2_2" /> <StackedColumn Data="data2" Config="config2" OtherConfig="config2_2" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3">
<Tab>示例3</Tab> <TabTemplate>示例3</TabTemplate>
<ChildContent> <ChildContent>
<StackedColumn Data="data3" Config="config3" /> <StackedColumn Data="data3" Config="config3" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="4"> <TabPane Key="4">
<Tab>示例4</Tab> <TabTemplate>示例4</TabTemplate>
<ChildContent> <ChildContent>
<StackedColumn Data="data4" Config="config4" /> <StackedColumn Data="data4" Config="config4" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="5"> <TabPane Key="5">
<Tab>示例5</Tab> <TabTemplate>示例5</TabTemplate>
<ChildContent> <ChildContent>
<StackedColumn Data="data5" Config="config5" /> <StackedColumn Data="data5" Config="config5" />
</ChildContent> </ChildContent>

2
site/AntDesign.Docs/Demos/Charts/Column/demo/Waterfall_.razor
View File

@ -3,7 +3,7 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<Waterfall Data="data1" Config="config1"/> <Waterfall Data="data1" Config="config1"/>
</ChildContent> </ChildContent>

8
site/AntDesign.Docs/Demos/Charts/Combo/demo/ColumnLineCombo_.razor
View File

@ -3,28 +3,28 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<ColumnLine Data="@(new[] {uvData, transformData})" Config="config1" /> <ColumnLine Data="@(new[] {uvData, transformData})" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<ColumnLine Data="@(new[] {uvData2, transformData2})" Config="config2" /> <ColumnLine Data="@(new[] {uvData2, transformData2})" Config="config2" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3">
<Tab>示例3</Tab> <TabTemplate>示例3</TabTemplate>
<ChildContent> <ChildContent>
<ColumnLine Data="@(new[] {uvData3, transformData3})" Config="config3" /> <ColumnLine Data="@(new[] {uvData3, transformData3})" Config="config3" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="4"> <TabPane Key="4">
<Tab>示例4</Tab> <TabTemplate>示例4</TabTemplate>
<ChildContent> <ChildContent>
<ColumnLine Data="@(new[] {uvData4, transformData4})" Config="config4" /> <ColumnLine Data="@(new[] {uvData4, transformData4})" Config="config4" />
</ChildContent> </ChildContent>

6
site/AntDesign.Docs/Demos/Charts/Combo/demo/DualLineCombo_.razor
View File

@ -4,21 +4,21 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<DualLine Data="@(new[] {data1, data2})" Config="config1" /> <DualLine Data="@(new[] {data1, data2})" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<DualLine Data="@(new[] {data1_2, data2_2})" Config="config2" /> <DualLine Data="@(new[] {data1_2, data2_2})" Config="config2" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3">
<Tab>示例3</Tab> <TabTemplate>示例3</TabTemplate>
<ChildContent> <ChildContent>
<DualLine Data="@(new[] {data1_3, data2_3})" Config="config3" /> <DualLine Data="@(new[] {data1_3, data2_3})" Config="config3" />
</ChildContent> </ChildContent>

4
site/AntDesign.Docs/Demos/Charts/Combo/demo/GroupedColumnLineCombo_.razor
View File

@ -3,13 +3,13 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<GroupedColumnLine Data="@(new[] {uvBillData, transformData})" Config="config1" /> <GroupedColumnLine Data="@(new[] {uvBillData, transformData})" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<GroupedColumnLine Data="@(new[] {uvBillData_2, transformData_2})" Config="config2" /> <GroupedColumnLine Data="@(new[] {uvBillData_2, transformData_2})" Config="config2" />
</ChildContent> </ChildContent>

4
site/AntDesign.Docs/Demos/Charts/Combo/demo/StackedColumnLineCombo_.razor
View File

@ -3,14 +3,14 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<StackedColumnLine Data="@(new[] {uvBillData, transformData})" Config="config1" /> <StackedColumnLine Data="@(new[] {uvBillData, transformData})" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<StackedColumnLine Data="@(new[] {uvBillData_2, transformData_2})" Config="config2" /> <StackedColumnLine Data="@(new[] {uvBillData_2, transformData_2})" Config="config2" />
</ChildContent> </ChildContent>

12
site/AntDesign.Docs/Demos/Charts/Funnel/demo/Funnel_.razor
View File

@ -2,42 +2,42 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<Funnel Data="data1" Config="config1" /> <Funnel Data="data1" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<Funnel Data="data2" Config="config2" /> <Funnel Data="data2" Config="config2" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3">
<Tab>示例3</Tab> <TabTemplate>示例3</TabTemplate>
<ChildContent> <ChildContent>
<Funnel Data="data3" Config="config3" /> <Funnel Data="data3" Config="config3" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="4"> <TabPane Key="4">
<Tab>示例4</Tab> <TabTemplate>示例4</TabTemplate>
<ChildContent> <ChildContent>
<Funnel Data="data4" Config="config4" /> <Funnel Data="data4" Config="config4" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="5"> <TabPane Key="5">
<Tab>示例5</Tab> <TabTemplate>示例5</TabTemplate>
<ChildContent> <ChildContent>
<Funnel Data="data5" Config="config5" /> <Funnel Data="data5" Config="config5" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="6"> <TabPane Key="6">
<Tab>示例6</Tab> <TabTemplate>示例6</TabTemplate>
<ChildContent> <ChildContent>
<Funnel Data="data6" Config="config6" /> <Funnel Data="data6" Config="config6" />
</ChildContent> </ChildContent>

8
site/AntDesign.Docs/Demos/Charts/Gauge/demo/Gauge_.razor
View File

@ -3,28 +3,28 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<Gauge TItem="string" Config="config1" /> <Gauge TItem="string" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<Gauge TItem="string" Config="config2" /> <Gauge TItem="string" Config="config2" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3">
<Tab>示例3</Tab> <TabTemplate>示例3</TabTemplate>
<ChildContent> <ChildContent>
<Gauge TItem="string" Config="config3" /> <Gauge TItem="string" Config="config3" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="4"> <TabPane Key="4">
<Tab>示例4</Tab> <TabTemplate>示例4</TabTemplate>
<ChildContent> <ChildContent>
<Gauge TItem="string" Config="config4" /> <Gauge TItem="string" Config="config4" />
</ChildContent> </ChildContent>

8
site/AntDesign.Docs/Demos/Charts/GeneralConfiguration/demo/Axis.razor
View File

@ -5,28 +5,28 @@
<Tabs ActiveKeyChanged="OnTabChanged"> <Tabs ActiveKeyChanged="OnTabChanged">
<TabPane Key="1"> <TabPane Key="1">
<Tab>Example 1</Tab> <TabTemplate>Example 1</TabTemplate>
<ChildContent> <ChildContent>
<Line @ref="chart1" Data="data1" Config="config1" /> <Line @ref="chart1" Data="data1" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>Example 2</Tab> <TabTemplate>Example 2</TabTemplate>
<ChildContent> <ChildContent>
<Line @ref="chart2" Data="data2" Config="config2" /> <Line @ref="chart2" Data="data2" Config="config2" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3">
<Tab>Example 3</Tab> <TabTemplate>Example 3</TabTemplate>
<ChildContent> <ChildContent>
<Line @ref="chart3" Data="data3" Config="config3" /> <Line @ref="chart3" Data="data3" Config="config3" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="4"> <TabPane Key="4">
<Tab>Example 4</Tab> <TabTemplate>Example 4</TabTemplate>
<ChildContent> <ChildContent>
<Line @ref="chart4" Data="data4" Config="config4" /> <Line @ref="chart4" Data="data4" Config="config4" />
</ChildContent> </ChildContent>

2
site/AntDesign.Docs/Demos/Charts/GeneralConfiguration/demo/ChangeDataAtRuntime.razor
View File

@ -5,7 +5,7 @@
<Tabs ActiveKeyChanged="OnTabChanged"> <Tabs ActiveKeyChanged="OnTabChanged">
<TabPane Key="1"> <TabPane Key="1">
<Tab>Example 1</Tab> <TabTemplate>Example 1</TabTemplate>
<ChildContent> <ChildContent>
<Line @ref="chart1" Data="data1" Config="config1" /> <Line @ref="chart1" Data="data1" Config="config1" />
</ChildContent> </ChildContent>

2
site/AntDesign.Docs/Demos/Charts/GeneralConfiguration/demo/DarkMode.razor
View File

@ -3,7 +3,7 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>Example 1</Tab> <TabTemplate>Example 1</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Column Data="data1" Config="config1"/> <AntDesign.Charts.Column Data="data1" Config="config1"/>
</ChildContent> </ChildContent>

6
site/AntDesign.Docs/Demos/Charts/GeneralConfiguration/demo/Guideline.razor
View File

@ -3,21 +3,21 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>Example 1</Tab> <TabTemplate>Example 1</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Column Data="data1" Config="config1" /> <AntDesign.Charts.Column Data="data1" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>Example 2</Tab> <TabTemplate>Example 2</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Column Data="data2" Config="config2" /> <AntDesign.Charts.Column Data="data2" Config="config2" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3">
<Tab>Example 3</Tab> <TabTemplate>Example 3</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Column Data="data3" Config="config3" /> <AntDesign.Charts.Column Data="data3" Config="config3" />
</ChildContent> </ChildContent>

2
site/AntDesign.Docs/Demos/Charts/GeneralConfiguration/demo/Interop.razor
View File

@ -3,7 +3,7 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>Example 1</Tab> <TabTemplate>Example 1</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Column @ref="chart1" Data="data1" Config="config1"/> <AntDesign.Charts.Column @ref="chart1" Data="data1" Config="config1"/>
<Button OnClick="Render">Render</Button> <Button OnClick="Render">Render</Button>

4
site/AntDesign.Docs/Demos/Charts/GeneralConfiguration/demo/Legend.razor
View File

@ -5,14 +5,14 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>Example 1</Tab> <TabTemplate>Example 1</TabTemplate>
<ChildContent> <ChildContent>
<StackedColumn Data="data1" Config="config1" /> <StackedColumn Data="data1" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>Example 2</Tab> <TabTemplate>Example 2</TabTemplate>
<ChildContent> <ChildContent>
<StackedColumn Data="data2" Config="config2" /> <StackedColumn Data="data2" Config="config2" />
</ChildContent> </ChildContent>

2
site/AntDesign.Docs/Demos/Charts/GeneralConfiguration/demo/SetPadding.razor
View File

@ -3,7 +3,7 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>Example 1</Tab> <TabTemplate>Example 1</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Column Data="data1" Config="config1"/> <AntDesign.Charts.Column Data="data1" Config="config1"/>
</ChildContent> </ChildContent>

43
site/AntDesign.Docs/Demos/Charts/GeneralConfiguration/demo/SetState.razor
View File

@ -3,48 +3,29 @@
<Text>Undone</Text> <Text>Undone</Text>
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1" Tab="Example 1">
<Tab>Example 1</Tab> <AntDesign.Charts.Column Data="data1" Config="config1" OnCreateAfter="onCreateAfter1" />
<ChildContent>
<AntDesign.Charts.Column Data="data1" Config="config1" OnCreateAfter="onCreateAfter1" />
</ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2" Tab="Example 2">
<Tab>Example 2</Tab> <AntDesign.Charts.Column Data="data2" Config="config2" OnCreateAfter="onCreateAfter2" />
<ChildContent>
<AntDesign.Charts.Column Data="data2" Config="config2" OnCreateAfter="onCreateAfter2" />
</ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3" Tab="Example 3">
<Tab>Example 3</Tab> <AntDesign.Charts.Column Data="data3" Config="config3" OnCreateAfter="onCreateAfter3" />
<ChildContent>
<AntDesign.Charts.Column Data="data3" Config="config3" OnCreateAfter="onCreateAfter3" />
</ChildContent>
</TabPane> </TabPane>
<TabPane Key="4"> <TabPane Key="4" Tab="Example 4">
<Tab>Example 4</Tab> <AntDesign.Charts.Column Data="data4" Config="config4" OnCreateAfter="onCreateAfter4" />
<ChildContent>
<AntDesign.Charts.Column Data="data4" Config="config4" OnCreateAfter="onCreateAfter4" />
</ChildContent>
</TabPane> </TabPane>
<TabPane Key="5"> <TabPane Key="5" Tab="Example 5">
<Tab>Example 5</Tab> <AntDesign.Charts.Column Data="data5" Config="config5" OnCreateAfter="onCreateAfter5" />
<ChildContent>
<AntDesign.Charts.Column Data="data5" Config="config5" OnCreateAfter="onCreateAfter5" />
</ChildContent>
</TabPane> </TabPane>
<TabPane Key="6"> <TabPane Key="6" Tab="Example 6">
<Tab>Example 6</Tab> <AntDesign.Charts.Column Data="data6" Config="config6" OnCreateAfter="onCreateAfter6" />
<ChildContent>
<AntDesign.Charts.Column Data="data6" Config="config6" OnCreateAfter="onCreateAfter6" />
</ChildContent>
</TabPane> </TabPane>
</Tabs> </Tabs>
@code{ @code{

4
site/AntDesign.Docs/Demos/Charts/GeneralConfiguration/demo/TitleAndDescription.razor
View File

@ -3,14 +3,14 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>Example 1</Tab> <TabTemplate>Example 1</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Column Data="data1" Config="config1" /> <AntDesign.Charts.Column Data="data1" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>Example 2</Tab> <TabTemplate>Example 2</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Column Data="data2" Config="config2" /> <AntDesign.Charts.Column Data="data2" Config="config2" />
</ChildContent> </ChildContent>

2
site/AntDesign.Docs/Demos/Charts/Heatmap/demo/DensityHeatmap_.razor
View File

@ -4,7 +4,7 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<DensityHeatmap @ref="chart1" Data="data1" Config="config1"/> <DensityHeatmap @ref="chart1" Data="data1" Config="config1"/>
</ChildContent> </ChildContent>

8
site/AntDesign.Docs/Demos/Charts/Heatmap/demo/Heatmap_.razor
View File

@ -4,28 +4,28 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<Heatmap @ref="chart1" Data="data1" Config="config1" /> <Heatmap @ref="chart1" Data="data1" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<Heatmap Data="data2" Config="config2" /> <Heatmap Data="data2" Config="config2" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3">
<Tab>示例3</Tab> <TabTemplate>示例3</TabTemplate>
<ChildContent> <ChildContent>
<Heatmap Data="data3" Config="config3" /> <Heatmap Data="data3" Config="config3" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="4"> <TabPane Key="4">
<Tab>示例4</Tab> <TabTemplate>示例4</TabTemplate>
<ChildContent> <ChildContent>
<Heatmap Data="data4" Config="config4" /> <Heatmap Data="data4" Config="config4" />
</ChildContent> </ChildContent>

10
site/AntDesign.Docs/Demos/Charts/Line/demo/Line_.razor
View File

@ -5,31 +5,31 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Line @ref="@chart1" Data="data1" Config="config1"/> <AntDesign.Charts.Line @ref="@chart1" Data="data1" Config="config1"/>
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Line Data="data2" Config="config2"/> <AntDesign.Charts.Line Data="data2" Config="config2"/>
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3">
<Tab>示例3</Tab> <TabTemplate>示例3</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Line Data="data3" Config="config3"/> <AntDesign.Charts.Line Data="data3" Config="config3"/>
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="4"> <TabPane Key="4">
<Tab>示例4</Tab> <TabTemplate>示例4</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Line Data="data4" Config="config4"/> <AntDesign.Charts.Line Data="data4" Config="config4"/>
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="5"> <TabPane Key="5">
<Tab>示例5</Tab> <TabTemplate>示例5</TabTemplate>
<ChildContent> <ChildContent>
<Line @ref="@chart5" Data="data5" Config="config5"/> <Line @ref="@chart5" Data="data5" Config="config5"/>
</ChildContent> </ChildContent>

10
site/AntDesign.Docs/Demos/Charts/Line/demo/MarkerPoint_.razor
View File

@ -3,35 +3,35 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Line Data="data1" Config="config1" OtherConfig="otherConfig1" /> <AntDesign.Charts.Line Data="data1" Config="config1" OtherConfig="otherConfig1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Line Data="data2" Config="config2" OtherConfig="otherConfig2" /> <AntDesign.Charts.Line Data="data2" Config="config2" OtherConfig="otherConfig2" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3">
<Tab>示例3</Tab> <TabTemplate>示例3</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Line Data="data3" Config="config3" OtherConfig="otherConfig3" /> <AntDesign.Charts.Line Data="data3" Config="config3" OtherConfig="otherConfig3" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="4"> <TabPane Key="4">
<Tab>示例4</Tab> <TabTemplate>示例4</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Line Data="data4" Config="config4" OtherConfig="otherConfig4" /> <AntDesign.Charts.Line Data="data4" Config="config4" OtherConfig="otherConfig4" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="5"> <TabPane Key="5">
<Tab>示例5</Tab> <TabTemplate>示例5</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Line Data="data5" Config="config5" OtherConfig="otherConfig5" /> <AntDesign.Charts.Line Data="data5" Config="config5" OtherConfig="otherConfig5" />
</ChildContent> </ChildContent>

14
site/AntDesign.Docs/Demos/Charts/Line/demo/MultipleLine_.razor
View File

@ -5,47 +5,47 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Line Data="data1" Config="config1" /> <AntDesign.Charts.Line Data="data1" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Line @ref="chart2" Data="data2" Config="config2" /> <AntDesign.Charts.Line @ref="chart2" Data="data2" Config="config2" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3">
<Tab>示例3</Tab> <TabTemplate>示例3</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Line @ref="chart3" Data="data3" Config="config3" /> <AntDesign.Charts.Line @ref="chart3" Data="data3" Config="config3" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="4"> <TabPane Key="4">
<Tab>示例4</Tab> <TabTemplate>示例4</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Line Data="data4" Config="config4" /> <AntDesign.Charts.Line Data="data4" Config="config4" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="5"> <TabPane Key="5">
<Tab>示例5</Tab> <TabTemplate>示例5</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Line Data="data5" Config="config5" /> <AntDesign.Charts.Line Data="data5" Config="config5" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="6"> <TabPane Key="6">
<Tab>示例6</Tab> <TabTemplate>示例6</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Line Data="data6" Config="config6" /> <AntDesign.Charts.Line Data="data6" Config="config6" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="7"> <TabPane Key="7">
<Tab>示例7</Tab> <TabTemplate>示例7</TabTemplate>
<ChildContent> <ChildContent>
<AntDesign.Charts.Line @ref ="chart7" Data="data7" Config="config7" /> <AntDesign.Charts.Line @ref ="chart7" Data="data7" Config="config7" />
</ChildContent> </ChildContent>

4
site/AntDesign.Docs/Demos/Charts/Liquid/demo/Liquid_.razor
View File

@ -3,14 +3,14 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<Liquid TItem="string" Config="config1" /> <Liquid TItem="string" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<Liquid TItem="string" Config="config2" /> <Liquid TItem="string" Config="config2" />
</ChildContent> </ChildContent>

6
site/AntDesign.Docs/Demos/Charts/Pie/demo/Donut_.razor
View File

@ -3,21 +3,21 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>Example 1</Tab> <TabTemplate>Example 1</TabTemplate>
<ChildContent> <ChildContent>
<Donut Data="data1" Config="config1" /> <Donut Data="data1" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>Example 2</Tab> <TabTemplate>Example 2</TabTemplate>
<ChildContent> <ChildContent>
<Donut Data="data2" Config="config2" /> <Donut Data="data2" Config="config2" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3">
<Tab>Example 3</Tab> <TabTemplate>Example 3</TabTemplate>
<ChildContent> <ChildContent>
<Donut Data="data3" Config="config3" /> <Donut Data="data3" Config="config3" />
</ChildContent> </ChildContent>

8
site/AntDesign.Docs/Demos/Charts/Pie/demo/Pie_.razor
View File

@ -3,28 +3,28 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>Example 1</Tab> <TabTemplate>Example 1</TabTemplate>
<ChildContent> <ChildContent>
<Pie Data="data1" Config="config1" /> <Pie Data="data1" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>Example 2</Tab> <TabTemplate>Example 2</TabTemplate>
<ChildContent> <ChildContent>
<Pie Data="data2" Config="config2" /> <Pie Data="data2" Config="config2" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3">
<Tab>Example 3</Tab> <TabTemplate>Example 3</TabTemplate>
<ChildContent> <ChildContent>
<Pie Data="data3" Config="config3" /> <Pie Data="data3" Config="config3" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="4"> <TabPane Key="4">
<Tab>Example 4</Tab> <TabTemplate>Example 4</TabTemplate>
<ChildContent> <ChildContent>
<Pie Data="data4" Config="config4" /> <Pie Data="data4" Config="config4" />
</ChildContent> </ChildContent>

4
site/AntDesign.Docs/Demos/Charts/Radar/demo/Radar_.razor
View File

@ -3,14 +3,14 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<Radar Data="data1" Config="config1" /> <Radar Data="data1" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<Radar Data="data2" Config="config2" /> <Radar Data="data2" Config="config2" />
</ChildContent> </ChildContent>

6
site/AntDesign.Docs/Demos/Charts/Rose/demo/Rose_.razor
View File

@ -3,21 +3,21 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<Rose Data="data1" Config="config1" /> <Rose Data="data1" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<Rose Data="data2" Config="config2" OtherConfig="otherConfig2" /> <Rose Data="data2" Config="config2" OtherConfig="otherConfig2" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3">
<Tab>示例3</Tab> <TabTemplate>示例3</TabTemplate>
<ChildContent> <ChildContent>
<Rose Data="data3" Config="config3" OtherConfig="otherConfig3" /> <Rose Data="data3" Config="config3" OtherConfig="otherConfig3" />
</ChildContent> </ChildContent>

8
site/AntDesign.Docs/Demos/Charts/Scatter/demo/Scatter_.razor
View File

@ -4,28 +4,28 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<Scatter @ref="chart1" Data="data1" Config="config1" /> <Scatter @ref="chart1" Data="data1" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<Scatter @ref="chart2" Data="data2" Config="config2" /> <Scatter @ref="chart2" Data="data2" Config="config2" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3">
<Tab>示例3</Tab> <TabTemplate>示例3</TabTemplate>
<ChildContent> <ChildContent>
<Scatter Data="data3" Config="config3" /> <Scatter Data="data3" Config="config3" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
@*<TabPane Key="4"> @*<TabPane Key="4">
<Tab>示例4</Tab> <TabTemplate>示例4</TabTemplate>
<ChildContent> <ChildContent>
<Scatter @ref="chart4" Data="data4" Config="config4" /> <Scatter @ref="chart4" Data="data4" Config="config4" />
</ChildContent> </ChildContent>

8
site/AntDesign.Docs/Demos/Charts/Step/demo/BasicStepLine_.razor
View File

@ -5,28 +5,28 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<StepLine @ref="@chart1" Config="config1" Data="data1" /> <StepLine @ref="@chart1" Config="config1" Data="data1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<StepLine Config="config2" Data="data2" /> <StepLine Config="config2" Data="data2" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3">
<Tab>示例3</Tab> <TabTemplate>示例3</TabTemplate>
<ChildContent> <ChildContent>
<StepLine Config="config3" Data="data3" /> <StepLine Config="config3" Data="data3" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="4"> <TabPane Key="4">
<Tab>示例4</Tab> <TabTemplate>示例4</TabTemplate>
<ChildContent> <ChildContent>
<StepLine Config="config4" Data="data4" /> <StepLine Config="config4" Data="data4" />
</ChildContent> </ChildContent>

4
site/AntDesign.Docs/Demos/Charts/Step/demo/MultipleStepLine_.razor
View File

@ -5,14 +5,14 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<StepLine Data="data1" Config="config1" /> <StepLine Data="data1" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<StepLine Data="data2" Config="config2" /> <StepLine Data="data2" Config="config2" />
</ChildContent> </ChildContent>

6
site/AntDesign.Docs/Demos/Charts/Treemap/demo/Treemap_.razor
View File

@ -4,21 +4,21 @@
<Tabs> <Tabs>
<TabPane Key="1"> <TabPane Key="1">
<Tab>示例1</Tab> <TabTemplate>示例1</TabTemplate>
<ChildContent> <ChildContent>
<Treemap Data="data1" Config="config1" /> <Treemap Data="data1" Config="config1" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
@*<TabPane Key="2"> @*<TabPane Key="2">
<Tab>示例2</Tab> <TabTemplate>示例2</TabTemplate>
<ChildContent> <ChildContent>
<Treemap Data="data2" Config="config2" /> <Treemap Data="data2" Config="config2" />
</ChildContent> </ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3">
<Tab>示例3</Tab> <TabTemplate>示例3</TabTemplate>
<ChildContent> <ChildContent>
<Treemap Data="data3" Config="config3" /> <Treemap Data="data3" Config="config3" />
</ChildContent> </ChildContent>

12
site/AntDesign.Docs/Demos/Components/Card/demo/Tabs1.razor
View File

@ -6,15 +6,15 @@
<CardTabs> <CardTabs>
<Tabs DefaultActiveKey="1"> <Tabs DefaultActiveKey="1">
<TabPane Key="1"> <TabPane Key="1">
<Tab>Tab 1</Tab> <TabTemplate>Tab 1</TabTemplate>
<ChildContent>Content of Tab Pane 1</ChildContent> <ChildContent>Content of Tab Pane 1</ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>Tab 2</Tab> <TabTemplate>Tab 2</TabTemplate>
<ChildContent>Content of Tab Pane 2</ChildContent> <ChildContent>Content of Tab Pane 2</ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3">
<Tab>Tab 3</Tab> <TabTemplate>Tab 3</TabTemplate>
<ChildContent>Content of Tab Pane 3</ChildContent> <ChildContent>Content of Tab Pane 3</ChildContent>
</TabPane> </TabPane>
</Tabs> </Tabs>
@ -30,15 +30,15 @@
<Tabs DefaultActiveKey="1"> <Tabs DefaultActiveKey="1">
<ChildContent> <ChildContent>
<TabPane Key="1"> <TabPane Key="1">
<Tab>Article</Tab> <TabTemplate>Article</TabTemplate>
<ChildContent>Content of Tab Pane 1</ChildContent> <ChildContent>Content of Tab Pane 1</ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>App</Tab> <TabTemplate>App</TabTemplate>
<ChildContent>Content of Tab Pane 2</ChildContent> <ChildContent>Content of Tab Pane 2</ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3">
<Tab>Project</Tab> <TabTemplate>Project</TabTemplate>
<ChildContent>Content of Tab Pane 3</ChildContent> <ChildContent>Content of Tab Pane 3</ChildContent>
</TabPane> </TabPane>
</ChildContent> </ChildContent>

4
site/AntDesign.Docs/Demos/Components/PageHeader/demo/Responsive.razor
View File

@ -30,10 +30,10 @@
<PageHeaderFooter> <PageHeaderFooter>
<Tabs DefaultActiveKey="1"> <Tabs DefaultActiveKey="1">
<TabPane Key="1"> <TabPane Key="1">
<Tab>Details</Tab> <TabTemplate>Details</TabTemplate>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab>Rule</Tab> <TabTemplate>Rule</TabTemplate>
</TabPane> </TabPane>
</Tabs> </Tabs>
</PageHeaderFooter> </PageHeaderFooter>

5
site/AntDesign.Docs/Demos/Components/Tabs/demo/Basic.razor
View File

@ -1,9 +1,8 @@
<Tabs DefaultActiveKey="1" @bind-ActiveKey="@nKey" OnChange="OnTabChange"> <Tabs DefaultActiveKey="1" @bind-ActiveKey="@nKey" OnChange="OnTabChange">
@foreach (var item in lstTabs) @foreach (var item in lstTabs)
{ {
<TabPane Key="@item.KeyName"> <TabPane Key="@item.KeyName" Tab="@item.TabName">
<Tab>@item.TabName</Tab> @item.Content @nKey
<ChildContent>@item.Content @nKey</ChildContent>
</TabPane> </TabPane>
} }
</Tabs> </Tabs>

15
site/AntDesign.Docs/Demos/Components/Tabs/demo/Card.razor
View File

@ -1,14 +1,11 @@
<Tabs Type="@TabType.Card"> <Tabs Type="@TabType.Card">
<TabPane Key="1"> <TabPane Key="1" Tab="Tab 1">
<Tab>Tab 1</Tab> Content of Tab Pane 1
<ChildContent>Content of Tab Pane 1</ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2" Tab="Tab 2">
<Tab>Tab 2</Tab> Content of Tab Pane 2
<ChildContent>Content of Tab Pane 2</ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3" Tab="Tab 3">
<Tab>Tab 3</Tab> Content of Tab Pane 3
<ChildContent>Content of Tab Pane 3</ChildContent>
</TabPane> </TabPane>
</Tabs> </Tabs>

33
site/AntDesign.Docs/Demos/Components/Tabs/demo/CardTop.razor
View File

@ -1,28 +1,19 @@
<div class="card-container"> <div class="card-container">
<Tabs Type="@TabType.Card"> <Tabs Type="@TabType.Card">
<TabPane Key="1"> <TabPane Key="1" Tab="Tab Title 1">
<Tab>Tab Title 1</Tab> <p>Content of Tab Pane 1</p>
<ChildContent> <p>Content of Tab Pane 1</p>
<p>Content of Tab Pane 1</p> <p>Content of Tab Pane 1</p>
<p>Content of Tab Pane 1</p>
<p>Content of Tab Pane 1</p>
</ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2" Tab="Tab Title 2">
<Tab>Tab Title 2</Tab> <p>Content of Tab Pane 2</p>
<ChildContent> <p>Content of Tab Pane 2</p>
<p>Content of Tab Pane 2</p> <p>Content of Tab Pane 2</p>
<p>Content of Tab Pane 2</p>
<p>Content of Tab Pane 2</p>
</ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3" Tab="Tab Title 3">
<Tab>Tab Title 3</Tab> <p>Content of Tab Pane 3</p>
<ChildContent> <p>Content of Tab Pane 3</p>
<p>Content of Tab Pane 3</p> <p>Content of Tab Pane 3</p>
<p>Content of Tab Pane 3</p>
<p>Content of Tab Pane 3</p>
</ChildContent>
</TabPane> </TabPane>
</Tabs> </Tabs>
</div> </div>

5
site/AntDesign.Docs/Demos/Components/Tabs/demo/CustomAddTrigger.razor
View File

@ -5,9 +5,8 @@
<Tabs Type="@TabType.EditableCard" HideAdd @bind-ActiveKey="activeKey"> <Tabs Type="@TabType.EditableCard" HideAdd @bind-ActiveKey="activeKey">
@foreach (var pane in panes) @foreach (var pane in panes)
{ {
<TabPane Key="@pane.Key"> <TabPane Key="@pane.Key" Tab="@pane.Title">
<Tab>@pane.Title</Tab> @pane.Content
<ChildContent>@pane.Content</ChildContent>
</TabPane> </TabPane>
} }
</Tabs> </Tabs>

15
site/AntDesign.Docs/Demos/Components/Tabs/demo/CustomTabBar.razor
View File

@ -1,14 +1,11 @@
<Tabs DefaultActiveKey="1"> <Tabs DefaultActiveKey="1">
<TabPane Key="1"> <TabPane Key="1" Tab="Tab 1">
<Tab>Tab 1</Tab> Content of Tab Pane 1
<ChildContent>Content of Tab Pane 1</ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2" Tab="Tab 2">
<Tab>Tab 2</Tab> Content of Tab Pane 2
<ChildContent>Content of Tab Pane 2</ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3" Tab="Tab 3">
<Tab>Tab 3</Tab> Content of Tab Pane 3
<ChildContent>Content of Tab Pane 3</ChildContent>
</TabPane> </TabPane>
</Tabs> </Tabs>

15
site/AntDesign.Docs/Demos/Components/Tabs/demo/CustomTabBarNode.razor
View File

@ -1,14 +1,11 @@
<Tabs Draggable> <Tabs Draggable>
<TabPane Key="1"> <TabPane Key="1" Tab="Tab 1">
<Tab>Tab 1</Tab> Tab 1
<ChildContent>Tab 1</ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2" Tab="Tab 2">
<Tab>Tab 2</Tab> Tab 2
<ChildContent>Tab 2</ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3" Tab="Tab 3">
<Tab>Tab 3</Tab> Tab 3
<ChildContent>Tab 3</ChildContent>
</TabPane> </TabPane>
</Tabs> </Tabs>

15
site/AntDesign.Docs/Demos/Components/Tabs/demo/Disabled.razor
View File

@ -1,14 +1,11 @@
<Tabs DefaultActiveKey="1"> <Tabs DefaultActiveKey="1">
<TabPane Key="1"> <TabPane Key="1" Tab="Tab 1">
<Tab>Tab 1</Tab> Tab 1
<ChildContent>Tab 1</ChildContent>
</TabPane> </TabPane>
<TabPane Key="2" Disabled> <TabPane Key="2" Tab="Tab 2" Disabled>
<Tab>Tab 2</Tab> Tab 2
<ChildContent>Tab 2</ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3" Tab="Tab 3">
<Tab>Tab 3</Tab> Tab 3
<ChildContent>Tab 3</ChildContent>
</TabPane> </TabPane>
</Tabs> </Tabs>

17
site/AntDesign.Docs/Demos/Components/Tabs/demo/EditableCard.razor
View File

@ -1,20 +1,20 @@
<Tabs DefaultActiveKey="1" Type="@TabType.EditableCard" OnAddClick="OnAddClick" @bind-ActiveKey="activeKey"> <Tabs DefaultActiveKey="1" Type="@TabType.EditableCard" OnAddClick="OnAddClick" OnClose="OnTabClose" @bind-ActiveKey="activeKey">
@foreach (var pane in panes) @foreach (var pane in panes)
{ {
<TabPane Key="@pane.Key" Closable="@pane.Closable"> <TabPane Key="@pane.Key" Tab="@pane.Title" Closable="@pane.Closable">
<Tab>@pane.Title</Tab> @pane.Content
<ChildContent>@pane.Content</ChildContent>
</TabPane> </TabPane>
} }
</Tabs> </Tabs>
@code{ @code {
private string activeKey; private string activeKey;
private int newTabIndex; private int newTabIndex;
public record Pane(string Title, string Content, string Key, bool Closable = true); public record Pane(string Title, string Content, string Key, bool Closable = true);
List<Pane> panes = new List<Pane>() { List<Pane> panes = new List<Pane>()
{
new("Tab 1", "Content of Tab Pane 1","1"), new("Tab 1", "Content of Tab Pane 1","1"),
new("Tab 2", "Content of Tab Pane 2","2"), new("Tab 2", "Content of Tab Pane 2","2"),
new("Tab 3", "Content of Tab Pane 3","3",false), new("Tab 3", "Content of Tab Pane 3","3",false),
@ -26,4 +26,9 @@
activeKey = $"newTab{newTabIndex++}"; activeKey = $"newTab{newTabIndex++}";
panes.Add(new Pane($"Tab {key}", $"Content of Tab Pane {key}", activeKey)); panes.Add(new Pane($"Tab {key}", $"Content of Tab Pane {key}", activeKey));
} }
void OnTabClose(string key)
{
Console.WriteLine($"tab close:{key}");
}
} }

15
site/AntDesign.Docs/Demos/Components/Tabs/demo/Extra.razor
View File

@ -3,17 +3,14 @@
<Button>Extra Action</Button> <Button>Extra Action</Button>
</TabBarExtraContent> </TabBarExtraContent>
<ChildContent> <ChildContent>
<TabPane Key="1"> <TabPane Key="1" Tab="Tab 1">
<Tab>Tab 1</Tab> Content of Tab Pane 1
<ChildContent>Content of Tab Pane 1</ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2" Tab="Tab 2">
<Tab>Tab 2</Tab> Content of Tab Pane 2
<ChildContent>Content of Tab Pane 2</ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3" Tab="Tab 3">
<Tab>Tab 3</Tab> Content of Tab Pane 3
<ChildContent>Content of Tab Pane 3</ChildContent>
</TabPane> </TabPane>
</ChildContent> </ChildContent>
</Tabs> </Tabs>

8
site/AntDesign.Docs/Demos/Components/Tabs/demo/Icon_.razor
View File

@ -1,14 +1,14 @@
<Tabs DefaultActiveKey="2"> <Tabs DefaultActiveKey="2">
<TabPane Key="1"> <TabPane Key="1">
<Tab> <TabTemplate>
<span><Icon Type="android" />Tab 1</span> <span><Icon Type="android" />Tab 1</span>
</Tab> </TabTemplate>
<ChildContent>Tab 1</ChildContent> <ChildContent>Tab 1</ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2">
<Tab> <TabTemplate>
<span><Icon Type="apple" />Tab 2</span> <span><Icon Type="apple" />Tab 2</span>
</Tab> </TabTemplate>
<ChildContent>Tab 2</ChildContent> <ChildContent>Tab 2</ChildContent>
</TabPane> </TabPane>
</Tabs> </Tabs>

17
site/AntDesign.Docs/Demos/Components/Tabs/demo/Position.razor
View File

@ -6,21 +6,18 @@
<Radio RadioButton Value="@TabPosition.Bottom">Bottom</Radio> <Radio RadioButton Value="@TabPosition.Bottom">Bottom</Radio>
</RadioGroup> </RadioGroup>
<Tabs DefaultActiveKey="1" TabPosition="@position"> <Tabs DefaultActiveKey="1" TabPosition="@position">
<TabPane Key="1"> <TabPane Key="1" Tab="Tab 1">
<Tab>Tab 1</Tab> Content of Tab Pane 1
<ChildContent>Content of Tab Pane 1</ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2" Tab="Tab 2">
<Tab>Tab 2</Tab> Content of Tab Pane 2
<ChildContent>Content of Tab Pane 2</ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3" Tab="Tab 3">
<Tab>Tab 3</Tab> Content of Tab Pane 3
<ChildContent>Content of Tab Pane 3</ChildContent>
</TabPane> </TabPane>
</Tabs> </Tabs>
</div> </div>
@code{ @code {
private string position = TabPosition.Top; private string position = TabPosition.Top;
} }

32
site/AntDesign.Docs/Demos/Components/Tabs/demo/Size.razor
View File

@ -6,36 +6,30 @@
</RadioGroup> </RadioGroup>
<Tabs DefaultActiveKey="1" Size="@size" Style="margin-bottom: 32px"> <Tabs DefaultActiveKey="1" Size="@size" Style="margin-bottom: 32px">
<TabPane Key="1"> <TabPane Key="1" Tab="Tab 1">
<Tab>Tab 1</Tab> Content of Tab Pane 1
<ChildContent>Content of Tab Pane 1</ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2" Tab="Tab 2">
<Tab>Tab 2</Tab> Content of Tab Pane 2
<ChildContent>Content of Tab Pane 2</ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3" Tab="Tab 3">
<Tab>Tab 3</Tab> Content of Tab Pane 3
<ChildContent>Content of Tab Pane 3</ChildContent>
</TabPane> </TabPane>
</Tabs> </Tabs>
<Tabs DefaultActiveKey="1" Type="@TabType.Card" Size="@size"> <Tabs DefaultActiveKey="1" Type="@TabType.Card" Size="@size">
<TabPane Key="1"> <TabPane Key="1" Tab="Tab 1">
<Tab>Tab 1</Tab> Content of Tab Pane 1
<ChildContent>Content of Tab Pane 1</ChildContent>
</TabPane> </TabPane>
<TabPane Key="2"> <TabPane Key="2" Tab="Tab 2">
<Tab>Tab 2</Tab> Content of Tab Pane 2
<ChildContent>Content of Tab Pane 2</ChildContent>
</TabPane> </TabPane>
<TabPane Key="3"> <TabPane Key="3" Tab="Tab 3">
<Tab>Tab 3</Tab> Content of Tab Pane 3
<ChildContent>Content of Tab Pane 3</ChildContent>
</TabPane> </TabPane>
</Tabs> </Tabs>
</div> </div>
@code{ @code {
private string size = TabSize.Default; private string size = TabSize.Default;
} }

15
site/AntDesign.Docs/Demos/Components/Tabs/demo/Slide.razor
View File

@ -6,21 +6,14 @@
<Tabs DefaultActiveKey="0" TabPosition="@mode" Style="height: 220px;"> <Tabs DefaultActiveKey="0" TabPosition="@mode" Style="height: 220px;">
@for (int i = 0; i < 30; i++) @for (int i = 0; i < 30; i++)
{ {
var myTab = i; var key = $"{i}";
<TabPane Key="@($"{myTab}")"> <TabPane Key="@key" Tab=@($"Tab-{@key}")>
<Tab>Tab-@myTab</Tab> Content of tab Pane @key
<ChildContent>Content of tab Pane @myTab</ChildContent>
</TabPane> </TabPane>
} }
</Tabs> </Tabs>
</div> </div>
@code{ @code {
private string mode = TabPosition.Top; private string mode = TabPosition.Top;
RenderFragment<int> template = (i) =>@<TabPane Key="@i.ToString()">
<Tab>Tab-@i</Tab>
<ChildContent>Content of tab Pane @i</ChildContent>
</TabPane>;
} }

42
site/AntDesign.Docs/Demos/Components/Tabs/doc/index.en-US.md
View File

@ -13,7 +13,7 @@ Tabs make it easy to switch between different views.
Ant Design has 3 types of Tabs for different situations. Ant Design has 3 types of Tabs for different situations.
- Card Tabs: for managing too many closeable views. - Card Tabs: for managing too many closeable views.
- Normal Tabs: for functional aspects of a page. - Normal Tabs: for EventCallbackal aspects of a page.
- [RadioButton](/components/radio/#components-radio-demo-radiobutton): for secondary tabs. - [RadioButton](/components/radio/#components-radio-demo-radiobutton): for secondary tabs.
## API ## API
@ -22,22 +22,23 @@ Ant Design has 3 types of Tabs for different situations.
| Property | Description | Type | Default | | Property | Description | Type | Default |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| activeKey | Current TabPane's key | string | - | | ActiveKey | Current TabPane's key | string | - |
| animated | Whether to change tabs with animation. Only works while `tabPosition="top"\|"bottom"` | boolean \| {inkBar:boolean, tabPane:boolean} | `true`, `false` when `type="card"` | | Animated | Whether to change tabs with animation. Only works while `tabPosition="top"\|"bottom"` | boolean \| {inkBar:boolean, tabPane:boolean} | `true`, `false` when `type="card"` |
| renderTabBar | replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | | RenderTabBar | replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - |
| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set. | string | - | | DefaultActiveKey | Initial active TabPane's key, if `activeKey` is not set. | string | - |
| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | `false` | | HideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | `false` |
| size | preset tab bar size | `large` \| `default` \| `small` | `default` | | Size | preset tab bar size | `large` \| `default` \| `small` | `default` |
| tabBarExtraContent | Extra content in tab bar | React.ReactNode | - | | TabBarExtraContent | Extra content in tab bar | RenderFargment | - |
| tabBarGutter | The gap between tabs | number | - | | TabBarGutter | The gap between tabs | number | - |
| tabBarStyle | Tab bar style object | object | - | | TabBarStyle | Tab bar style object | object | - |
| tabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` | | TabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` |
| type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` | | Type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` |
| onChange | Callback executed when active tab is changed | Function(activeKey) {} | - | | OnChange | Callback executed when active tab is changed | EventCallback(activeKey) {} | - |
| onEdit | Callback executed when tab is added or removed. Only works while `type="editable-card"` | (targetKey, action): void | - | | OnEdit | Callback executed when tab is added or removed. Only works while `type="editable-card"` | (targetKey, action): void | - |
| onNextClick | Callback executed when next button is clicked | Function | - | | OnClose | Callback executed when tab is removed. Only works while `type="editable-card"` | EventCallback(targetKey) {} | - |
| onPrevClick | Callback executed when prev button is clicked | Function | - | | OnNextClick | Callback executed when next button is clicked | EventCallback | - |
| onTabClick | Callback executed when tab is clicked | Function(key: string, event: MouseEvent) | - | | OnPrevClick | Callback executed when prev button is clicked | EventCallback | - |
| OnTabClick | Callback executed when tab is clicked | EventCallback(key: string, event: MouseEvent) | - |
More option at [rc-tabs option](https://github.com/react-component/tabs#tabs) More option at [rc-tabs option](https://github.com/react-component/tabs#tabs)
@ -45,8 +46,9 @@ More option at [rc-tabs option](https://github.com/react-component/tabs#tabs)
| Property | Description | Type | Default | | Property | Description | Type | Default |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false | | ForceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false |
| key | TabPane's key | string | - | | Key | TabPane's key | string | - |
| tab | Show text in TabPane's head | string\|ReactNode | - | | Tab | Show text in TabPane's head | string | - |
| TabTemplate | Template of TabPane's head | RenderFargment | - |
More option at [rc-tabs option](https://github.com/react-component/tabs#tabpane) More option at [rc-tabs option](https://github.com/react-component/tabs#tabpane)

40
site/AntDesign.Docs/Demos/Components/Tabs/doc/index.zh-CN.md
View File

@ -25,27 +25,29 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| activeKey | 当前激活 tab 面板的 key | string | 无 | | ActiveKey | 当前激活 tab 面板的 key | string | 无 |
| animated | 是否使用动画切换 Tabs，在 `tabPosition=top|bottom` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true, 当 type="card" 时为 false | | Animated | 是否使用动画切换 Tabs，在 `tabPosition=top|bottom` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true, 当 type="card" 时为 false |
| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | 无 | | RenderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | 无 |
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板 | | DefaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板 |
| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | | HideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |
| size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | 'default' | | Size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | 'default' |
| tabBarExtraContent | tab bar 上额外的元素 | React.ReactNode | 无 | | TabBarExtraContent | tab bar 上额外的元素 | RenderFargment | 无 |
| tabBarGutter | tabs 之间的间隙 | number | 无 | | TabBarGutter | tabs 之间的间隙 | number | 无 |
| tabBarStyle | tab bar 的样式对象 | object | - | | TabBarStyle | tab bar 的样式对象 | object | - |
| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | 'top' | | TabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | 'top' |
| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | 'line' | | Type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | 'line' |
| onChange | 切换面板的回调 | Function(activeKey) {} | 无 | | OnChange | 切换面板的回调 | Function(activeKey) {} | 无 |
| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | 无 | | OnEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | 无 |
| onNextClick | next 按钮被点击的回调 | Function | 无 | | OnClose | 删除页签的回调，在 `type="editable-card"` 时有效 | EventCallback(targetKey) {} | - |
| onPrevClick | prev 按钮被点击的回调 | Function | 无 | | OnNextClick | next 按钮被点击的回调 | Function | 无 |
| onTabClick | tab 被点击的回调 | Function | 无 | | OnPrevClick | prev 按钮被点击的回调 | Function | 无 |
| OnTabClick | tab 被点击的回调 | Function | 无 |
### Tabs.TabPane ### Tabs.TabPane
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| ----------- | ------------------------- | ----------------- | ------ | | ----------- | ------------------------- | ----------------- | ------ |
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | | ForceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
| key | 对应 activeKey | string | 无 | | Key | 对应 activeKey | string | 无 |
| tab | 选项卡头显示文字 | string\|ReactNode | 无 | | Tab | 选项卡头显示文字 | string | 无 |
| TabTemplate | 选项卡头显示文字模板 | RenderFargment | 无 |

17
tests/AntDesign.Tests/tabs/TabsTests.cs
View File

@ -1,4 +1,8 @@
using System; // Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.
using System;
using AntDesign.JsInterop; using AntDesign.JsInterop;
using Bunit; using Bunit;
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components;
@ -8,11 +12,11 @@ using Microsoft.JSInterop;
using Moq; using Moq;
using Xunit; using Xunit;
namespace AntDesign.Tests.tabs namespace AntDesign.Tests.Tabs
{ {
public class TabsTests : AntDesignTestBase public partial class TabsTests : AntDesignTestBase
{ {
private IRenderedComponent<Tabs> CreateTabs(Action<RenderTreeBuilder> childContent) private IRenderedComponent<AntDesign.Tabs> CreateTabs(Action<RenderTreeBuilder> childContent)
{ {
var jsRuntime = new Mock<IJSRuntime>(); var jsRuntime = new Mock<IJSRuntime>();
jsRuntime.Setup(u => u.InvokeAsync<HtmlElement>(JSInteropConstants.GetDomInfo, It.IsAny<object[]>())) jsRuntime.Setup(u => u.InvokeAsync<HtmlElement>(JSInteropConstants.GetDomInfo, It.IsAny<object[]>()))
@ -20,7 +24,7 @@ namespace AntDesign.Tests.tabs
Context.Services.AddScoped(_ => jsRuntime.Object); Context.Services.AddScoped(_ => jsRuntime.Object);
var cut = Context.RenderComponent<Tabs>(tabs => tabs var cut = Context.RenderComponent<AntDesign.Tabs>(tabs => tabs
.Add(x => x.DefaultActiveKey, "2") .Add(x => x.DefaultActiveKey, "2")
.Add(b => b.ChildContent, b => childContent(b)) .Add(b => b.ChildContent, b => childContent(b))
); );
@ -32,13 +36,12 @@ namespace AntDesign.Tests.tabs
{ {
var tabPane1Builder = new ComponentParameterCollectionBuilder<TabPane>() var tabPane1Builder = new ComponentParameterCollectionBuilder<TabPane>()
.Add(x => x.Key, key) .Add(x => x.Key, key)
.Add(x => x.Tab, $"Tab {key}".ToRenderFragment()) .Add(x => x.Tab, $"Tab {key}")
.Add(x => x.ChildContent, $"Content {key}".ToRenderFragment()); .Add(x => x.ChildContent, $"Content {key}".ToRenderFragment());
configure?.Invoke(tabPane1Builder); configure?.Invoke(tabPane1Builder);
return tabPane1Builder.Build().ToRenderFragment<TabPane>(); return tabPane1Builder.Build().ToRenderFragment<TabPane>();
} }
[Fact] [Fact]

40
tests/AntDesign.Tests/tabs/TabsTests.razor Normal file
View File

@ -0,0 +1,40 @@
@inherits AntDesignTestBase
@code {
[Fact]
public void Render_tab_pane_with_tabTemplate()
{
JSInterop.Setup<HtmlElement>("AntDesign.interop.getDomInfo", _ => true);
var cut = Context.Render(
@<Tabs>
<TabPane Key="tab1">
<TabTemplate>Tab 1</TabTemplate>
</TabPane>
</Tabs>
);
var tabElement = cut.Find(".ant-tabs-tab-btn");
tabElement.InnerHtml.Trim().Should().Be("Tab 1");
}
[Fact]
public void Bind_OnClose_event()
{
JSInterop.Setup<HtmlElement>("AntDesign.interop.getDomInfo", _ => true);
var closeTab = "";
Action<string> OnClose = (string key) => closeTab = key;
var cut = Context.Render(
@<Tabs Type="@TabType.EditableCard" OnClose="OnClose">
<TabPane Key="tab1" Tab="Tab 1">
</TabPane>
</Tabs>
);
var removeElement = cut.Find(".ant-tabs-tab-remove");
removeElement.Click();
closeTab.Should().Be("tab1");
}
}