首页 教程 API文档

tab面板组件

2015-11-17 13:49:18

属性


父模块 widget
依赖组件 TabButton, Menu
Demo地址 TabPanel

描述


TabPanel是一个通过多个tab标签对面板进行互相切换的组件.

TabPanel组件图片

成员列表


方法名称 成员类型 描述
tabItem 内部模块 tab项模块
contentPadding public 内容区边距值
select public 选中指定tab面板
activeIndex public 活动tab的索引号
activeItem public 活动tab项
append public 追加tab项
insert public 插入tab项
clear public 清空tab项
remove extend tab移除操作
append public 追加tab项

参数选项


名称 类型 默认值 描述
defaultClass String StdUI_TabPanel 默认css class名称
level Number 4 layout布局等级
height Number 300 TabPanel高度值
tabButtonHeight Number 32 tab按钮高度
tabButtonSpacing Number 2 tab按钮之间的间距
tabClosable Boolean false tab按钮是否拥有关闭图标
maxTabButtonWidth Number,String 50% tab按钮最大宽度
contentPadding Number 5 内容区的边距
deferRender Boolean true tab面板是否延迟渲染,当tab切换到的时候才渲染该面板
activeIndex Number 0 当前已经激活的tab面板索引号
items Array null 要添加的tab项数据,对应append方法
tabPosition String "top"

tab栏的位置,可取值范围有

名称 描述
top 顶部
right 右侧
bottom 底部
left 左侧

事件


名称 回调参数 描述
removeTab
名称 描述
index tab的索引号
item tab项对象
当移除tab项的时候,removeTab事件会被触发
selectTab
名称 描述
index tab的索引号
item tab项对象
当tab项被选中的时候,selectTab事件会被触发

相关例子



Std.ui("TabPanel",{
    width:350,
    height:300,
    deferRender:true,
    renderTo:"body",
    tabPosition:"top",
    items:[
       {
            button:"first",
            content:{
                layout:{
                    ui:"VBoxLayout",
                    items:[
                        {ui:"Button",text:"aaa"},
                        {ui:"LineEdit"},
                        {ui:"TextEdit"}
                    ]
                }
            }
        },{
            button:{
                icon:"images/play.png",
                text:"tabButton1",
                styleType:"textBesideIcon"
            },
            content:"sdfsdfsdsdafgdsfgsdfg"
        },{
            button:{
                icon:"images/play.png",
                styleType:"icon",
                width:200,
                closable:true
            },
            content:{
                url:"Std/src/1.txt"
            }
        },{
            button:"tabButton2",
            content:{
                iframe:"http://www.baidu.com"
            }
        }
    ],
    on:{
        removeTab:function(index,item){
            console.log(item)
        }
    }
});