Question

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

对于ui，我可以指定颜色而不是暗色和浅色吗？如何使其成为我们选择的特定颜色或背景图像？

感谢。

Answer 1

您需要做的是使用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选项卡的Active颜色。

您可以通过以下方式定义所需的UI数量并在代码中使用它们：

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

这是Sencha的官方方式。

希望这有帮助。

Answer 2

为tabPanel或其子项添加cls属性。这为html标记提供了一个类，因此您可以将它用于CSS中的样式。

显然，在此之后，您可以使用以下内容设置样式：

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

Answer 3

@AndreaCammarata

我可以使用上面的sass更改tabpanel Color。但我要改变标签的活动颜色。请在下面找到我的代码

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

更改Sencha Touch Ext.TabPanel的颜色

3 个答案: