Syncfusion Javascript Tab - 更改 Tab 按钮高度/字体大小

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

您可以使用 header 大小属性自定义选项卡 header 的大小。请参考代码片段：

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

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

参考 API 文档 link header大小属性：https://help.syncfusion.com/api/js/ejtab#members:headersize

JS 游乐场示例 link：http://jsplayground.syncfusion.com/gh4uq3ff

此致， Karthikeyan V.

Answer 2

这是我自己的回答，只是为了提醒您使用选项卡控件需要考虑的其他事项。多亏了@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;
}

我将样式分开，以便可以将 'X' 着色为红色。

接下来我使用 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 Tab - 更改 Tab 按钮高度/字体大小

Syncfusion Javascript Tab - Change Tab button height / Font size

javascript

css

jquery

syncfusion