为选项卡的标签增加关闭选项

[zms9110750]

自己写的关闭功能有很多bug。

• 例如，关闭按钮不能放在<MTab>里面。否则执行完了切换逻辑后，才执行Mtab的标签切换逻辑，导致关闭的切换无意义。
• 此外，以下代码中有个bug，对当前标签使用关闭后，外部的容器大小不会再随着切换标签而变化。
• 另外，希望绑定用的Value使用泛型，以配合字典使用。

@page "/Tesk"
<MTabs Centered @bind-Value="tab">
		<MTab Value="0">
			首页
		</MTab>
		@foreach (var (title, url) in items)
	{
		<MTab Value="title.GetHashCode()">
			@title
		</MTab>
		<MIcon OnClick="@(()=>{ tab=0;items.Remove(title); })">mdi-close</MIcon>
	}
</MTabs>
<MContainer Class=" mcontainer mcontainer-max-width-md mcontainer-center ">
	<MRow Justify="JustifyTypes.Center">
		<MCol>
			<MTabsItems Value="tab">
				<MTabItem Value="0">
					<MButton OnClick="Add">添加随机数据</MButton>
				</MTabItem>
				@foreach (var (tab, content) in items)
				{
					<MTabItem Value="tab.GetHashCode()">
						<MCard>
							@content
						</MCard>
					</MTabItem>
				}
			</MTabsItems>
		</MCol>
	</MRow>
</MContainer>
@code {
	StringNumber tab = 0;
	public static Dictionary<int, string> items = new Dictionary<int, string>();

	void Add()
	{
		var randNum1 = Random.Shared.Next(100);
		var randLength = Random.Shared.Next(100, 3000);
		items[randNum1] = Convert.ToBase64String(Enumerable.Range(1, randLength).Select(s => (byte)s).ToArray());
		tab = randNum1;
	}
}

[zms9110750]

还有，如果关闭前后，Value没有发生变化。 那么选项卡会刷新从而居中。 但选项卡下面的标识线还在原位置。

[capdiem]

@zms9110750 目前没有计划给MTab内置关闭按钮。下面是一个可行的示例，你可以将其封装成一个组件来复用。后续我会更新文档的“动态标签”示例。

<MButton OnClick="AddNewTab">Add</MButton>

<MCard>
    <MTabs @bind-Value="_tabValue"
           @ref="_tabsRef">
        @foreach (var tab in _tabs)
        {
            <MTab @key="tab" Value="tab">
                <span>
                    Tab @tab
                </span>
                <MButton Icon OnClick="@(() => RemoveTab(tab))"
                         OnClickStopPropagation>
                    <MIcon>mdi-close</MIcon>
                </MButton>
            </MTab>
        }
    </MTabs>

    <MTabsItems Value="@_tabValue">
        @foreach (var tab in _tabs)
        {
            <MTabItem @key="tab" Value="tab">
                <h1>Tab @tab</h1>
            </MTabItem>
        }
    </MTabsItems>
</MCard>

@code {

    private MTabs _tabsRef;
    private StringNumber _tabValue;

    private List<int> _tabs = Enumerable.Range(0, 3).ToList();

    private void AddNewTab()
    {
        var newTab = _tabs.Max() + 1;
        _tabs.Add(newTab);
        _tabValue = newTab;
    }

    private void RemoveTab(int val)
    {
        _tabs.Remove(val);

        if (_tabValue == val)
        {
            _tabValue = _tabs.FirstOrDefault();
        }

        StateHasChanged();
        _ = _tabsRef.CallSlider();
    }

}

[github-actions[bot]]

This issue is stale because it has been open for 4 days with no activity.

[github-actions[bot]]

This issue is closed because it has been open for 3 days with stale.