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

下個版本（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的基礎版）

 

 

不忘初心，砥礪前行！