Sencha touch 更改Sencha Touch Ext.TabPanel的颜色

对于

ui

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

---

谢谢。

为您的tabPanel或其子项赋予

cls

属性。这为html标记提供了一个类，因此您可以在CSS中使用它进行样式设置

显然，在此之后，您将使用以下方式设置其样式：

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

---

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

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

如您所见，我正在使用一些变量来设置想要的样式。 详情如下：

• $tabs myUI：是“myUI”UI选项卡的基本颜色
• $tabs bar gradient：是选项卡栏的背景渐变样式
• $tabs myUI active：是“灯光”UI选项卡的活动颜色

您可以定义需要多少不同的UI，并通过以下方式在代码中使用它们：

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

这是官方的Sencha方法

希望这能有所帮助。

@AndreaCammarata

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

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

视图：

---

什么不起作用？如果您查看生成的HTML，您是否看到您的类被添加到HTML元素中？

@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'
        }
    ]
}