更改Sencha Touch Ext.TabPanel的颜色

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的官方方式.

希望这可以帮助.