test/ant-design-blazor
1
0
Fork 0
mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-12-03 12:37:40 +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;
<div @key="Pane?.Key"
@ref="Pane.TabBar"
@onclick:stopPropagation="@onclickStopPropagation"
@onclick="@(e => Parent.HandleTabClick(Pane))"
@ondragover:preventDefault="@ondragoverPreventDefault"
@ondragstart="@(e => Parent.HandleDragStart(e, Pane))"
@ondrop="@(_ => Parent.HandleDrop(Pane))"
aria-controls="@($"rc-tabs-{Id}-tab-{Key}")"
aria-selected="@(Pane?.IsActive)"
class="@Pane.ClassMapper.Class"
draggable="@Parent.Draggable.ToString()"
id="@($"rc-tabs-{Id}-tab-{Key}")"
ondragover="event.preventDefault();">
@ref="Pane.TabBar"
@onclick:stopPropagation="@onclickStopPropagation"
@onclick="@(e => Parent.HandleTabClick(Pane))"
@ondragover:preventDefault="@ondragoverPreventDefault"
@ondragstart="@(e => Parent.HandleDragStart(e, Pane))"
@ondrop="@(_ => Parent.HandleDrop(Pane))"
aria-controls="@($"rc-tabs-{Id}-tab-{Key}")"
aria-selected="@(Pane?.IsActive)"
class="@Pane.ClassMapper.Class"
draggable="@Parent.Draggable.ToString()"
id="@($"rc-tabs-{Id}-tab-{Key}")"
ondragover="event.preventDefault();">
<div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0">
@Tab
@if (TabTemplate != null)
{
@TabTemplate
}
else
{
@Tab
}
</div>
@if (Parent.Type == TabType.EditableCard && Closable)
{
@ -42,12 +49,12 @@ else if (IsPane)
Pane.HasRendered = true;
<div @key="Pane?.Key"
tabindex="@(IsActive ? "0" : "-1")"
class="ant-tabs-tabpane @(Pane.IsActive ? "ant-tabs-tabpane-active" : "")"
id="@($"rc-tabs-{Id}-panel-{Key}")"
role="tabpanel" aria-hidden="@(Pane.IsActive ? "false" : "true")"
aria-labelledby="@($"rc-tabs-{Id}-panel-{Key}")"
style="@(Pane.IsActive ? "" : "display: none;")">
tabindex="@(IsActive ? "0" : "-1")"
class="ant-tabs-tabpane @(Pane.IsActive ? "ant-tabs-tabpane-active" : "")"
id="@($"rc-tabs-{Id}-panel-{Key}")"
role="tabpanel" aria-hidden="@(Pane.IsActive ? "false" : "true")"
aria-labelledby="@($"rc-tabs-{Id}-panel-{Key}")"
style="@(Pane.IsActive ? "" : "display: none;")">
@ChildContent
</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
{
@ -52,7 +56,10 @@ namespace AntDesign
/// Show text in <see cref="TabPane"/>'s head
/// </summary>
[Parameter]
public RenderFragment Tab { get; set; }
public string Tab { get; set; }
[Parameter]
public RenderFragment TabTemplate { get; set; }
[Parameter]
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.Linq;
using System.Threading.Tasks;
@ -157,6 +161,13 @@ namespace AntDesign
[Parameter]
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]
public EventCallback OnAddClick { get; set; }
@ -232,49 +243,6 @@ namespace AntDesign
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>
/// Add <see cref="TabPane"/> to <see cref="Tabs"/>
/// </summary>
@ -347,6 +315,12 @@ namespace AntDesign
}
_needRefresh = true;
if (OnClose.HasDelegate)
{
await OnClose.InvokeAsync(pane.Key);
}
StateHasChanged();
}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -30,10 +30,10 @@
<PageHeaderFooter>
<Tabs DefaultActiveKey="1">
<TabPane Key="1">
<Tab>Details</Tab>
<TabTemplate>Details</TabTemplate>
</TabPane>
<TabPane Key="2">
<Tab>Rule</Tab>
<TabTemplate>Rule</TabTemplate>
</TabPane>
</Tabs>
</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">
@foreach (var item in lstTabs)
{
<TabPane Key="@item.KeyName">
<Tab>@item.TabName</Tab>
<ChildContent>@item.Content @nKey</ChildContent>
<TabPane Key="@item.KeyName" Tab="@item.TabName">
@item.Content @nKey
</TabPane>
}
</Tabs>

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

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

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

@ -1,28 +1,19 @@
<div class="card-container">
<Tabs Type="@TabType.Card">
<TabPane Key="1">
<Tab>Tab Title 1</Tab>
<ChildContent>
<p>Content of Tab Pane 1</p>
<p>Content of Tab Pane 1</p>
<p>Content of Tab Pane 1</p>
</ChildContent>
<TabPane Key="1" Tab="Tab Title 1">
<p>Content of Tab Pane 1</p>
<p>Content of Tab Pane 1</p>
<p>Content of Tab Pane 1</p>
</TabPane>
<TabPane Key="2">
<Tab>Tab Title 2</Tab>
<ChildContent>
<p>Content of Tab Pane 2</p>
<p>Content of Tab Pane 2</p>
<p>Content of Tab Pane 2</p>
</ChildContent>
<TabPane Key="2" Tab="Tab Title 2">
<p>Content of Tab Pane 2</p>
<p>Content of Tab Pane 2</p>
<p>Content of Tab Pane 2</p>
</TabPane>
<TabPane Key="3">
<Tab>Tab Title 3</Tab>
<ChildContent>
<p>Content of Tab Pane 3</p>
<p>Content of Tab Pane 3</p>
<p>Content of Tab Pane 3</p>
</ChildContent>
<TabPane Key="3" Tab="Tab Title 3">
<p>Content of Tab Pane 3</p>
<p>Content of Tab Pane 3</p>
<p>Content of Tab Pane 3</p>
</TabPane>
</Tabs>
</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">
@foreach (var pane in panes)
{
<TabPane Key="@pane.Key">
<Tab>@pane.Title</Tab>
<ChildContent>@pane.Content</ChildContent>
<TabPane Key="@pane.Key" Tab="@pane.Title">
@pane.Content
</TabPane>
}
</Tabs>

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

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

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

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

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

@ -1,14 +1,11 @@
<Tabs DefaultActiveKey="1">
<TabPane Key="1">
<Tab>Tab 1</Tab>
<ChildContent>Tab 1</ChildContent>
<TabPane Key="1" Tab="Tab 1">
Tab 1
</TabPane>
<TabPane Key="2" Disabled>
<Tab>Tab 2</Tab>
<ChildContent>Tab 2</ChildContent>
<TabPane Key="2" Tab="Tab 2" Disabled>
Tab 2
</TabPane>
<TabPane Key="3">
<Tab>Tab 3</Tab>
<ChildContent>Tab 3</ChildContent>
<TabPane Key="3" Tab="Tab 3">
Tab 3
</TabPane>
</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)
{
<TabPane Key="@pane.Key" Closable="@pane.Closable">
<Tab>@pane.Title</Tab>
<ChildContent>@pane.Content</ChildContent>
<TabPane Key="@pane.Key" Tab="@pane.Title" Closable="@pane.Closable">
@pane.Content
</TabPane>
}
</Tabs>
@code{
@code {
private string activeKey;
private int newTabIndex;
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 2", "Content of Tab Pane 2","2"),
new("Tab 3", "Content of Tab Pane 3","3",false),
@ -26,4 +26,9 @@
activeKey = $"newTab{newTabIndex++}";
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>
</TabBarExtraContent>
<ChildContent>
<TabPane Key="1">
<Tab>Tab 1</Tab>
<ChildContent>Content of Tab Pane 1</ChildContent>
<TabPane Key="1" Tab="Tab 1">
Content of Tab Pane 1
</TabPane>
<TabPane Key="2">
<Tab>Tab 2</Tab>
<ChildContent>Content of Tab Pane 2</ChildContent>
<TabPane Key="2" Tab="Tab 2">
Content of Tab Pane 2
</TabPane>
<TabPane Key="3">
<Tab>Tab 3</Tab>
<ChildContent>Content of Tab Pane 3</ChildContent>
<TabPane Key="3" Tab="Tab 3">
Content of Tab Pane 3
</TabPane>
</ChildContent>
</Tabs>

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

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

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

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

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

@ -6,36 +6,30 @@
</RadioGroup>
<Tabs DefaultActiveKey="1" Size="@size" Style="margin-bottom: 32px">
<TabPane Key="1">
<Tab>Tab 1</Tab>
<ChildContent>Content of Tab Pane 1</ChildContent>
<TabPane Key="1" Tab="Tab 1">
Content of Tab Pane 1
</TabPane>
<TabPane Key="2">
<Tab>Tab 2</Tab>
<ChildContent>Content of Tab Pane 2</ChildContent>
<TabPane Key="2" Tab="Tab 2">
Content of Tab Pane 2
</TabPane>
<TabPane Key="3">
<Tab>Tab 3</Tab>
<ChildContent>Content of Tab Pane 3</ChildContent>
<TabPane Key="3" Tab="Tab 3">
Content of Tab Pane 3
</TabPane>
</Tabs>
<Tabs DefaultActiveKey="1" Type="@TabType.Card" Size="@size">
<TabPane Key="1">
<Tab>Tab 1</Tab>
<ChildContent>Content of Tab Pane 1</ChildContent>
<TabPane Key="1" Tab="Tab 1">
Content of Tab Pane 1
</TabPane>
<TabPane Key="2">
<Tab>Tab 2</Tab>
<ChildContent>Content of Tab Pane 2</ChildContent>
<TabPane Key="2" Tab="Tab 2">
Content of Tab Pane 2
</TabPane>
<TabPane Key="3">
<Tab>Tab 3</Tab>
<ChildContent>Content of Tab Pane 3</ChildContent>
<TabPane Key="3" Tab="Tab 3">
Content of Tab Pane 3
</TabPane>
</Tabs>
</div>
@code{
@code {
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;">
@for (int i = 0; i < 30; i++)
{
var myTab = i;
<TabPane Key="@($"{myTab}")">
<Tab>Tab-@myTab</Tab>
<ChildContent>Content of tab Pane @myTab</ChildContent>
var key = $"{i}";
<TabPane Key="@key" Tab=@($"Tab-{@key}")>
Content of tab Pane @key
</TabPane>
}
</Tabs>
</div>
@code{
@code {
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.
- 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.
## API
@ -22,22 +22,23 @@ Ant Design has 3 types of Tabs for different situations.
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| 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"` |
| renderTabBar | replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - |
| 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` |
| size | preset tab bar size | `large` \| `default` \| `small` | `default` |
| tabBarExtraContent | Extra content in tab bar | React.ReactNode | - |
| tabBarGutter | The gap between tabs | number | - |
| tabBarStyle | Tab bar style object | object | - |
| tabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` |
| type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` |
| onChange | Callback executed when active tab is changed | Function(activeKey) {} | - |
| 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 | - |
| onPrevClick | Callback executed when prev button is clicked | Function | - |
| onTabClick | Callback executed when tab is clicked | Function(key: string, event: MouseEvent) | - |
| 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"` |
| RenderTabBar | replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - |
| 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` |
| Size | preset tab bar size | `large` \| `default` \| `small` | `default` |
| TabBarExtraContent | Extra content in tab bar | RenderFargment | - |
| TabBarGutter | The gap between tabs | number | - |
| TabBarStyle | Tab bar style object | object | - |
| TabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` |
| Type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` |
| 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 | - |
| OnClose | Callback executed when tab is removed. Only works while `type="editable-card"` | EventCallback(targetKey) {} | - |
| OnNextClick | Callback executed when next button is clicked | EventCallback | - |
| 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)
@ -45,8 +46,9 @@ More option at [rc-tabs option](https://github.com/react-component/tabs#tabs)
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false |
| key | TabPane's key | string | - |
| tab | Show text in TabPane's head | string\|ReactNode | - |
| ForceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false |
| Key | TabPane's key | string | - |
| 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)

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

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