Question

我在blazor中创建一个标签控件，我希望水平标签栏在有很多标签时能够响应。我尝试用tc-tabs处理它，但是没有显示滚动条，并且滚动条显示了显示其他标签。

我正在寻找2种不同的解决方案： -通过滚动条处理溢出的地方 -另一种是使用选项卡栏两侧的2个箭头来处理溢出（我可以尝试使用剃须刀功能来进行管理）

而且，我正在尝试修复每个标签右上角的关闭按钮，尤其是当标签名称过长时。

编辑（修复了右侧的关闭按钮+标签内的文本溢出）：

基于此帖子的滚动条解决方案仍然遇到问题：Bootstrap horizontal scrollable tab bar

<ul class="nav nav-tabs tc-tabs">
    @foreach (Tab tabItem in ItemsSource) {
        <li class="tc-tab @(SelectedItem == tabItem ? "tc-tab-active" : string.Empty)">
            <div @onclick="@(() => ActivatePage(tabItem))">
                <span class="tc-tab-title @(SelectedItem == tabItem ? "active" : string.Empty)">
                    @tabItem.Title
                </span>
            </div>
            <button class="close tc-tab-close" type="button" aria-label="Close" @onclick="@(() => DeletePage(tabItem))">
                <span aria-hidden="true">&times;</span>
            </button>
        </li>
    }
</ul>

css：

tc-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    display: -webkit-box;
}

.tc-tab {
    width: 200px;
    position: relative;
    padding: 5px;
    float: none;
}

.tc-tab-active {
    background-color: darkgray;
    color: white;
}

.tc-tab-title {
    width: 85%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
}

.tc-tab-close {
    width: 10%;
}

Answer 1

以下内容（虽然不是完整的解决方案）正在运行。实际上，我这样做是为了建议您创建水平选项卡栏应遵循的路径。 *创建选项卡组件以表示单个选项卡 *创建一个可以包含多个选项卡对象的TabBar组件，并根据需要对其进行操作。

请注意，每个选项卡都包含一个关闭按钮，单击这些按钮可以“关闭”该选项卡。

Tab.razor

  <li style="height:auto; width:inherit; padding:5px; border: 1px solid blue; text-align:right;">
        <span style="float: left">@Title</span>
        <a href="#" @onclick="@(() => Close.InvokeAsync(ID))" role="button">X</a>

    </li>
     <div style="padding:0px; ">@ChildContent</div> 


 @code {
      [Parameter]
      public int ID { get; set; }
      [Parameter]
       public string Title { get; set; }

      [Parameter]
      public RenderFragment ChildContent { get; set; }

      [Parameter]
      public EventCallback <int> Close {get; set;}
 }

TabBar.razor

<ul class="nav nav-tabs tb-tabs">
<li><a href="#" @onclick="@GoForward" role="button">--></a></li>
@foreach (var tab in tabs)
{
    <Tab ID="@tab.ID" Title="@tab.Title" Close="@Close"></Tab>

}

<li><a href="#" @onclick="@GoBackward" role="button">&lt;--</a></li>
</ul>



@code {

    // TODO: Add code to go forward
    private void GoForward()
    {

    }

    // TODO: Add code to go backward
    private void GoBackward()
    {

    }

    List<NavTab> tabs = new List<NavTab>
        {
            new NavTab{ ID = 1, Title = "Long Name Example 1"},
            new NavTab{ ID = 2, Title = "Small" },
            new NavTab{ ID = 3, Title = "Long Name Example 2" }
       };


    private void Close(int ID)
    {
        RemoveNavTab(ID);

    }

    // You can also create a similar method to add tabs dynamically
    public void RemoveNavTab(int ID)
    {

        tabs.Remove(tabs.Where(alert => alert.ID == ID).FirstOrDefault());
        StateHasChanged();
    }


    public class NavTab
    {
        public int ID { get; set; }
        public string Title { get; set; }


    }

 }

将以下内容放置在MainLayout锚元素“关于”上方

<div>
   <TabBar />
</div>

运行您的应用并测试代码...

注意：我已经创建了大纲，您要做的就是在其顶部添加必要的功能。使用FlexBox管理CSS中的标签。添加代码以确定要显示的文本大小等。

水平选项卡栏响应式引导程序/ blazor

1 个答案:

Tab.razor

TabBar.razor