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

【问题标题】：Syncfusion Javascript Tab - Change Tab button height / Font sizeSyncfusion Javascript 选项卡 - 更改选项卡按钮高度/字体大小
【发布时间】：2017-02-26 17:15:13
【问题描述】：

我目前正在尝试使用 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 吧？所以它必须是可能的。

【问题讨论】：

标签： javascript jquery css syncfusion

【解决方案1】：

您可以使用 headerSize 属性自定义 Tab 标题大小。请参考代码sn-p：

$("#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;
     }

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

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

问候， Karthikeyan V.

【讨论】：

谢谢，我回家试试这个。
这行得通，但是它不会重新定位关闭的“X”，所以它太低了。如何将关闭按钮保持在高度的中心？
你能帮忙把关闭按钮放在中间吗？

【解决方案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;
}

我将样式分开，以便将“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);
            }
        }

最终输出如下：

【讨论】：

嗨迈克尔，干得好。抱歉，刚刚看到你的cmets
@karthik 也许你可以帮我从第一个标签中删除关闭按钮。