水平标签栏响应式引导程序/ blazor

Question

我正在 blazor 中创建一个选项卡控件，并且我希望我的水平选项卡栏能够在有很多选项卡时做出响应。 我试图用我的tc-tabs 处理它，但没有显示滚动条，而是在新行上显示显示其他选项卡。

我正在寻找两种不同的解决方案： - 一个用滚动条处理溢出的地方 - 另一个使用标签栏两侧的 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; }


    }

 }

将以下内容放在锚元素“About”上方的 MainLayout 中

<div>
   <TabBar />
</div>

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

注意：我已经创建了大纲，您所要做的就是在其上添加必要的功能。使用 FlexBox 管理 css 中的选项卡。添加代码以确定要显示的文本的大小等。