【新特性速遞】新增單標籤頁模式，界面更加清爽！

下個版本（v5.6.0），咱們將對官網示例的框架進行調整，在現有默認【多標籤頁】基礎上新增【單標籤頁】模式，使得界面更加清爽！

設置項

設置項隱藏在右側頂部的菜單中，以下所示：

 

單標籤頁的優勢

對比下 Pure Black 主題下多標籤頁和單標籤頁的顯示效果差別：

多標籤頁：

 

單標籤頁：

 

能夠看出，【單標籤頁】相比【多標籤頁】，有以下優勢：

1. 去除了主選項卡標題欄，總體觀感更加清爽

2. 可以顯示更多的主內容區域

2. 當前頁面路徑顯示在頂部，定位更加清楚

3. 每次只顯示一個內容頁面，瀏覽器負荷更小

 

反過來講，【多標籤頁】相比【單標籤頁】，有以下優勢：

1. 能同時顯示多個標籤頁，來回切換更加方便

2. 能夠在標籤頁中加載子頁面，關閉後返回主頁面（避免主頁面數據丟失）

 

無論怎麼說，多一個選擇老是好的，但願你能喜歡此次的更新。

 

截圖賞析

下面，欣賞不一樣主題下的首頁效果：

===============================================

Dark Hive：

 

South Street：

 

Start：

 

Pure Purple：

 

Image Green Rain：

 

深刻代碼

那麼，如何向現有的框架添加【單標籤頁】模式呢？

1. 後臺初始化 C# 代碼中，隱藏選項卡控件的標題欄：

mainTabStrip.ShowTabHeader = false;

 

2. 在初始化左側樹菜單和主選項卡控件交互時，傳入 singleTabId 參數（這個參數用來指定惟一的標籤頁ID）：

var tabHomepageClientID = '<%= tabHomepage.ClientID %>';

F.initTreeTabStrip(treeMenu, mainTabStrip, {
    singleTabId: tabHomepageClientID
});

 

這個例子中，tabHomepage就是頁面初始定義的Tab，以下所示：

<f:TabStrip ID="mainTabStrip" CssClass="centerregion" ShowInkBar="true" BoxFlex="1" ShowBorder="true" EnableTabCloseMenu="true" runat="server">
    <Tabs>
        <f:Tab ID="tabHomepage" Title="首頁" IconFont="_Home" EnableIFrame="true" IFrameUrl="~/common/main.aspx" runat="server">
        </f:Tab>
    </Tabs>
</f:TabStrip>

 

DONE！

 

是否是很簡單，到時記得來升級哦（本更新基礎版適用，加入知識星球下載FineUIPro/Mvc/Core的基礎版）

 

 

不忘初心，砥礪前行！