Syncfusion Javascript選項卡 - 更改選項卡按鈕高度/字體大小

我正在嘗試使用Syncfusion Javascript控件構建網站。我到處搜尋試圖找到一種方法來改變控制的高度。我試圖改變標籤按鈕本身的高度而不是標籤主體。Syncfusion Javascript選項卡 - 更改選項卡按鈕高度/字體大小

我試過創建一個簡單的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正確的？所以它必須是可能的。

來源

2017-02-26 Michael Z.

您可以使用headerSize屬性自定義Tab標頭大小。請參考代碼片段：

$("#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文檔的鏈接：https://help.syncfusion.com/api/js/ejtab#members:headersize

JS遊樂場樣品鏈接：http://jsplayground.syncfusion.com/gh4uq3ff

問候，卡斯基延五

來源

2017-02-27 10:27:38 karthik

謝謝，我會嘗試這個，當我回家。 –

這有效，但它不會重新定位關閉「X」，因此它太低。我如何將關閉按鈕保持在高度的中心？ –

你能幫助保持關閉按鈕在中心嗎？ –

這是m你自己的回答只是爲了提醒需要與選項卡控件一起考慮的其他事情。感謝@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); 
      } 
     }

最終輸出看起來是這樣的：

來源

2017-02-28 00:34:28

嗨邁克爾，很棒的工作。對不起，剛纔我看到你的評論 – karthik

@karthik也許你可以幫我從第一個標籤中刪除關閉按鈕。 –

Syncfusion Javascript選項卡 - 更改選項卡按鈕高度/字體大小

回答

相關問題