【新特性速递】新增单标签页模式,界面更加清爽!

下个版本(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的基础版

 

 

不忘初心,砥砺前行!

 

posted @ 2019-07-22 09:53  三生石上(FineUI控件)  阅读(784)  评论(0编辑  收藏