如何解决更改Sencha Touch Ext.TabPanel的颜色
|new Ext.TabPanel({
fullscreen: true,cardSwitchAnimation: \'slide\',ui: \'dark\',items: [home,about]
});
对于ui
,我可以指定一种颜色,而不是深色和浅色吗?如何使其成为我们选择的特定颜色或背景图像?
谢谢。
解决方法
您需要做的是使用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选项卡的活动颜色。
您可以定义所需的不同UI并通过以下方式在代码中使用它们:
new Ext.TabPanel({
fullscreen: true,cardSwitchAnimation: \'slide\',ui: \'myUI\',items: [home,about]
});
这是官方的Sencha方法。
希望这可以帮助。
, 给您的tabPanel或它的孩子一个cls
属性。这为html标记提供了一个类,因此您可以在CSS中使用它进行样式设置。
显然,在此之后,您可以使用类似以下方式的样式:
background-image: url(...);
background-color: pink;
, @AndreaCammarata
我可以使用上方的[sass]更改标签面板的颜色。
但是我要更改选项卡的活动颜色。
请在下面找到我的代码
@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\'
}
]
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。