sencha-touch - 改变 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:是“浅色”UI 选项卡的事件颜色。

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

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

这是官方的 Sencha 方法。

希望这可以帮助。