Question

我目前正在尝试使用Syncfusion Javascript控件构建网站。我到处搜索试图找到一种方法来改变Tab控件的高度。我试图更改标签按钮本身的高度而不是标签主体。

我尝试过创建一个简单的CSS样式来改变字体大小，但那是不成功的。

<style>
.TabOverride{
    font-size: 5px;

}
</style>

这里我将TabOverride css分配给控件，但它不起作用。将itemSize设置为8px也不起作用。

$("#TabView").ejTab({
            cssClass: "TabOverride",
            showCloseButton: true,
            enableTabScroll: true,
            showRoundedCorner: true,
            width: "100%",
            height: "100%",
            itemSize: "8px"
        });

以下是Tab控件的支持页面。 https://help.syncfusion.com/js/tab/getting-started

我觉得这一定是可行的，因为在WindowsForm Syncfusion选项卡中有一个名为ItemSize的属性用于此目的。这就是我在jquery中尝试itemSize的原因。这应该是所有的CSS吗？所以它必须是可能的。

Answer 1

您可以使用headerSize属性自定义Tab标头大小。请参阅代码段：

＆＃13;

$("#TabView").ejTab({
            cssClass: "TabOverride",
            showCloseButton: true,
            enableTabScroll: true,
            showRoundedCorner: true,
            width: "100%",
            height: "100%",
            headerSize: "20px"
        });

＆＃13;

.TabOverride ul li a , .TabOverride ul li div{
    font-size: 5px;
     }

＆＃13;

请参阅headerSize属性的API文档链接：https://help.syncfusion.com/api/js/ejtab#members:headersize

JS Playground示例链接：http://jsplayground.syncfusion.com/gh4uq3ff

此致 Karthikeyan V。

Answer 2

这是我自己的回答，只是为了提醒一下Tab Control需要考虑的其他事项。感谢@karthik，我能够完成我所需要的以及改进它以更好地工作。

这是最终的解决方案和输出：

在CSS中声明两种不同的样式：

/*The tab text*/
.TabOverride ul li a{
    font-size: 13px;
}

/*The Close 'X" on each tab*/
.TabOverride ul li div{
    margin-top: 1% !important;
    color: red !important;
}

我将样式分开，以便我可以为＆＃39; X＆＃39;红色。

接下来，我使用jQuery启动选项卡并设置headerSize以调整选项卡按钮的大小。

$("#TabView").ejTab({
        cssClass: "TabOverride",
        showCloseButton: true,
        enableTabScroll: true,
        showRoundedCorner: true,
        width: "100%",
        height: "100%",
        headerSize: "29px",
        beforeItemRemove: function (args) {
            if (args.index == 0) {
                args.cancel = true;
            } else {
                RemoveTab(args.index);
            }
        }

最终输出如下：

Syncfusion Javascript选项卡 - 更改选项卡按钮高度/字体大小

2 个答案: