改变颜色Sencha Touch Ext.TabPanel

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

对于ui，我可以指定颜色，而不是黑暗和光明吗？我怎样才能使它成为我们选择的特定颜色或背景图像？改变颜色Sencha Touch Ext.TabPanel

谢谢。

来源

2011-05-28 slandau

你需要做的是定义使用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] 
    });

这是官方煎茶办法做到这一点。

希望这会有所帮助。

来源

2011-05-28 06:04:19

给你的tabPanel或其子女一个cls属性。这给html标签一个类，所以你可以在CSS中使用它作为样式。

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

来源

2011-05-28 02:40:30 Nicodemuz

补充说属性，它仍然是不工作=/ – slandau 2011-05-28 02:47:11

什么是不工作？如果你看看生成的HTML，你看到你的类被添加到HTML元素？ – Nicodemuz 2011-05-30 02:42:22

@AndreaCammarata

我能够改变使用上述青菜的一个tabpanel颜色。但我要更改标签的活动颜色。请在下面找到我的代码

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

VIEW：

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

来源

2013-02-08 10:04:05

改变颜色Sencha Touch Ext.TabPanel

回答

相关问题