Sencha Touch:绿色前进按钮

时间:2013-07-31 11:49:02

标签: css button user-interface sencha-touch-2 background-color

好的,这是针对不同类型按钮的sencha链接http://try.sencha.com/touch/2.2.0/demos/Ext.Button.ui/viewer.html。 所以,从那里开始按钮,我做

{
xtype: 'button',
ui: 'forward',//I'm adding this string to make it with a right arrow
text: 'forward'
}

美好而完美。这很容易。

有谁知道如何将此按钮设为绿色(不仅仅是按钮,还有箭头)?

3 个答案:

答案 0 :(得分:1)

实际上对于箭头,他们使用了webkit掩码,因此无论你使用css背景颜色给予该箭头的背景颜色,它都需要。因此,要使该按钮变为绿色,请使用以下代码: -

.x-button-forward, .x-button-forward:after { background: -webkit-linear-gradient(top, #a2e306,#7eb105 3%,#5b7f03); }

答案 1 :(得分:1)

简单:

{
  xtype: 'button',
  ui: ['confirm', 'forward'],
  text: 'forward'
}

答案 2 :(得分:0)

解决方案是用以下内容覆盖css类:

.x-webkit .x-button-forward:before, .x-webkit .x-button-forward:after, 
.x-webkit .x-toolbar .x-button-forward:before, .x-webkit .x-toolbar .x-button-forward:after 
{
 width: 15px;
 height: 32px;
 background-repeat: no-repeat;
 background-image: url(data:image/png;base64,XXXXXXXXXXXXXXXXXXXXXXXXX);
}

其中XXXXXXXXXXXXXXXXXXXXXXXXX字符串是由我的myarrow.png图片中的在线服务(谷歌生成数据:image / png; base64或类似内容)生成的。