extjs4 tab 样式修改

最新推荐文章于 2019-05-24 11:58:55 发布

最新推荐文章于 2019-05-24 11:58:55 发布 · 683 阅读

文章标签：

#ux

extjs 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何通过调整ExtJS TabBar样式表（tab-bar.css），包括设置背景色、边框、高度等属性，以实现更加美观且符合用户需求的Tab组件设计。通过实例展示了如何自定义TabBar的外观，包括顶部位置、高度和按钮样式，旨在提供更佳的交互体验。

默认的extjs tab给人感觉不够大气，修改了哈样式表

tab-bar.css:

/* CSS Document */

.ui-tab-bar{
	padding-top:1px;
}
.ui-tab-bar .x-tab-bar{
	background:#FFF !important;
	border:0 !important;
}

.ui-tab-bar .x-tab-bar-strip {
    top: 31px !important; /* Default value is 20*/
}

.ui-tab-bar .x-tab-bar-strip-default-top{
	height:0px !important;
}


.ui-tab-bar .ui-tab-body{
	border:0 !important;
}

.ui-tab-bar .x-tab-bar .x-tab-bar-body {
    height: 34px !important; /* Default value is 23*/
	
    /*border: 0 !important;*/ /* Overides the border that appears on resizing the grid */
}

.ui-tab-bar .x-tab-bar .x-tab-bar-body .x-box-inner {
    height: 32px !important; /* Default value is 21*/
}

.ui-tab-bar .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab {
    height: 31px !important; /* Default value is 21*/
}

.ui-tab-bar .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab-button {
    height: 24px !important; /* Default value 13*/
    line-height: 24px !important; /* Default value 13*/
	margin-top:5px;
}

引用方式：

var center = Ext.create("Ext.tab.Panel",{

region:"center",

id: 'center-panel',

defaults: {

autoScroll:true

cls:"ui-tab-bar",

bodyCls:"ui-tab-body",

activeTab: 0,

//plugins: [Ext.create('Ext.ux.TabCloseMenu')],

items: [{

id: "HomePage",