Question

我必须创建一个带有标签的菜单；这些选项卡来自控制器的一系列标签，因此我可以获得实际可用的选项卡数量。

所选标签必须始终包含标签的完整标签，并且必须比其他标签大一些； “其他”标签可以只显示部分标签，并用点

填充

（例如：如果我有4个名为test1，test2，test3，test4的标签，如果这些标签大于菜单，我将看到：

test1 te... te... te...

的test1标签比其他标签稍大。

我实际上尝试将3个不同的类与ng-class动态地应用（选项卡为1-5、6-10、11-15），并为选定的选项卡提供3个类，每个类的最小宽度百分比；

truncate是一个类，它使所有标签都用“ ...”（text-overflow: ellipsis等）填充
selected：适用于所选标签的类，该选项卡使标签变为白色（而不是灰色）并具有不同的标签颜色。

index.html：

<div class="tab-header-container">
        <div class="tab" ng-repeat="tab in tabs" 
            ng-class="{
                selected: tab.label==selectedTab.label, 

                'min-tabs': tabNum <=5,
                'min-tabs-selected-tab': tabNum <=5 && tab.label==selectedTab.label, 

                'med-tabs': tabNum > 5 && tabNum <= 10,
                'med-tabs-selected-tab': tabNum > 5 && tabNum <= 10 && tab.label==selectedTab.label,

                'max-tabs': tabNum > 10,
                'max-tabs-selected-tab': tabNum > 10 && tab.label==selectedTab.label
                }">
            <div class="shadow-corrector truncate"  ng-class="{selected: tab.label==selectedTab.label}" ng-click="onTabClick(tab)">
                {{tab.label | capitalize }}
            </div>
        </div> 
    </div>

index.css：

.min-tabs {
    min-width: 18%;
}

.min-tabs-selected-tab {
    min-width: 28%;
}

/* 6-10 tabs */
.med-tabs {
    min-width: 13%;
}

.med-tabs-selected-tab {
    min-width: 22%;
}

/* 11-15 tabs */
.max-tabs {
    min-width: 6%;
}

.max-tabs-selected-tab {
    min-width: 16%;
}

但是发生的是，选中时未完全显示所选选项卡的标题。此模型最多可以使用15个标签，这实际上是可用的最大标签数。

将发生的情况是，制表符将适合整行-且必须全部留在一行中；所选标签稍大；所选标签标签必须始终完整显示；所有制表符必须适合整个行，无论它们有多少。我知道这似乎并不困难，但我没有想法。帮助将不胜感激。

带有响应式标签的菜单，并根据标签号进行更改

0 个答案: