在 Kendo Tabstrip 中为单个标签面板设置样式

Question

我正在使用 Kendo-UI Tabstrip，并且想将一个类添加到一个特定的选项卡面板。这可能吗？在 items.Add() 部分中使用 .SpriteCssClasses 似乎只是将类添加到选项卡本身，而不是实际的面板。

非常感谢任何帮助。

Answer 1

您可以尝试使用 ID 获取特定面板，因为 kendo 会根据选项卡条的名称和选项卡编号（顺序）添加具有特定 ID 的 div，例如：

@(Html.Kendo().TabStrip()
    .Name("Main")
    .Items(Main =>
    {
        Main.Add()
            .Text("test1 title").Content(@<text>
                test1
            </text>);
        Main.Add()
            .Text("test2 title")
            .Content(@<text>
                test2
            </text>);
    })
)

这将生成以下 HTML：

<div class="k-tabstrip-wrapper" style="">
    <div id="Main" class="k-widget k-tabstrip k-header" data-role="tabstrip" tabindex="0" role="tablist" aria-activedescendant="Main_ts_active">
        <ul class="k-reset k-tabstrip-items">
            <li class="k-item k-state-default k-first k-tab-on-top k-state-active" role="tab" aria-controls="Main-1" style="" aria-selected="true">
                <span class="k-loading k-complete"></span>
                <a href="#Main-1" class="k-link">test1 title</a>
            </li>
            <li class="k-item k-state-default k-last" role="tab" aria-controls="Main-2" style="">
                <span class="k-loading k-complete"></span>
                <a href="#Main-2" class="k-link">test2 title</a>
            </li>
        </ul>
        <div id="Main-1" class="k-content k-state-active" role="tabpanel" aria-expanded="true" style="height: auto; overflow: hidden; opacity: 1; display: block;">
            <div style="display: none; position: absolute; opacity: 0.8; background-color: rgb(255, 255, 255); z-index: 1001; width: 33.4px; height: 20px;" class="tata-ajax-loader">
                <div style="background-position: center;background-repeat: no-repeat;height:100%;width:100%;background-color: transparent;" class="tata-ajax-loader-img"></div>
            </div>
            test1
        </div>
        <div id="Main-2" class="k-content" role="tabpanel" aria-expanded="false" style="height: auto; overflow: hidden; opacity: 0; display: none;" aria-hidden="true">
            <div style="display: none; position: absolute; opacity: 0.8; background-color: rgb(255, 255, 255); z-index: 1001; width: 33.4px; height: 20px;" class="tata-ajax-loader">
                <div style="background-position: center;background-repeat: no-repeat;height:100%;width:100%;background-color: transparent;" class="tata-ajax-loader-img"></div>
            </div>
            test2
        </div>
    </div>
</div>

请注意，ID 为“Main-1”和“Main-2”的 div 是实际面板的 ID，据我了解，这是您想要的，因此您可以在 ID 上添加 CSS：

#Main-1 {
    background-color: #E3F7A8;
}