更改Sencha Touch Ext.TabPanel的颜色

问题描述

|

new Ext.TabPanel({
            fullscreen: true,cardSwitchAnimation: \'slide\',ui: \'dark\',items: [home,about]
        });

对于

ui

，我可以指定一种颜色，而不是深色和浅色吗？如何使其成为我们选择的特定颜色或背景图像？ 谢谢。     

解决方法

        您需要做的是使用SASS和COMPASS定义新的ui类型。 因此，您必须熟悉这些框架。 如果已经安装了这些，并且已经知道如何创建应用程序主题CSS，则可以将以下行添加到主题.sass文件中，以定义自定义ui

@include sencha-tabbar-ui(\'myUI\',$tabs-myUI,$tabs-bar-gradient,$tabs-myUI-active);

如您所见，我正在使用一些变量来设置所需的样式。 详细说明： $ tabs-myUI：是\“ myUI \” UI选项卡的基础颜色。 $ tabs-bar-gradient：是标签栏的背景渐变样式。 $ tabs-myUI-active：是\“ light \” UI选项卡的活动颜色。 您可以定义所需的不同UI并通过以下方式在代码中使用它们：

new Ext.TabPanel({
        fullscreen: true,cardSwitchAnimation: \'slide\',ui: \'myUI\',items: [home,about]
    });

这是官方的Sencha方法。 希望这可以帮助。     ,        给您的tabPanel或它的孩子一个

cls

属性。这为html标记提供了一个类，因此您可以在CSS中使用它进行样式设置。 显然，在此之后，您可以使用类似以下方式的样式：

background-image: url(...);
background-color: pink;

    ,        @AndreaCammarata 我可以使用上方的[sass]更改标签面板的颜色。 但是我要更改选项卡的活动颜色。 请在下面找到我的代码

@include sencha-tabbar-ui(\'tabcolour\',#333333,\'glossy\',#0088CC);

视图：

config : {
style: \"background-color: white\",ui: \'tabcolour\',tabBar : {

    ui: \'tabcolour\',layout : {
            pack : \'center\'
        }
    },layout : {
        type : \'card\',animation : {
            type : \'fade\'
        }
    },items : [{
            title : \'Descrption\',xtype : \'item_description\'
        },{
            title : \'Photos\',xtype : \'Item_Photos\',},{
            title : \'Comments\',xtype : \'item_add_viewcomment\'
        },{
            title : \'Videoes\',xtype : \'item_video\'
        }
    ]
}