Горизонтальная панель вкладок реагирует bootstrap / блазор - PullRequest
Новая
       22

Горизонтальная панель вкладок реагирует bootstrap / блазор

0 голосов
/ 07 января 2020

Я создаю элемент управления вкладками в Blazor и хочу, чтобы моя горизонтальная панель вкладок реагировала, когда будет много вкладок. Я пытался справиться с этим с помощью tc-tabs, но полоса прокрутки не отображается, и в новой строке отображается вкладка «Показать другие».

enter image description here

I Ищу 2 разных решения: -Один из которых переполнение обрабатывается с помощью полосы прокрутки -Не другое, где переполнение обрабатывается с помощью 2 стрелок на каждой стороне панели вкладок (что я могу попытаться управлять с помощью функций бритвы)

А также, я пытаюсь исправить кнопку закрытия в правом верхнем углу каждой вкладки, особенно когда имя вкладки слишком длинное.

Редактировать (Исправлена ​​кнопка закрытия на вправо + переполнение текста внутри вкладки):

По-прежнему возникают проблемы с решением для полосы прокрутки, основанным на этом сообщении: Bootstrap горизонтальная прокручиваемая панель вкладок 

<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%;
}

1 Ответ

1 голос
/ 07 января 2020

Следующее, хотя и не полное решение, работает. Я действительно сделал это, чтобы предложить путь, по которому вы должны следовать, чтобы создать горизонтальную панель вкладок. * Создание компонента вкладки для представления одной вкладки. * Создание компонента 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 над элементом привязки «About» 

<div>
   <TabBar />
</div>

Запустите ваше приложение и протестируйте код ...

Примечание: я создал схему, и все, что вам нужно сделать, это добавить необходимые функции поверх него. Используйте FlexBox для управления вкладками в css. Добавьте код для определения размера отображаемого текста и т. Д. c.

...