TabPanel中的自定义图标失败

我想向TabPanel添加一个自定义图标，但是当我这样做时，它只是显示一个带圆角的黑盒子。TabPanel中的自定义图标失败

在URL中的代码是一些随机的RSS图标，我在网上找到的base64。我也尝试添加一个相对的网址到图片，但没有任何成功。

如果我更改我的代码以使用ext-touch.css文件（http://pastebin.org/447685）中的base64，它工作正常，为什么它不接受我的“自定义”图标？

注意：我不需要rss图标。我只是为了测试目的而尝试过。

2010-08-04 MrSoundless

MrSoundless - 我在Sencha Touch的主题引擎上工作。问题在于底部的选项卡使用WebKit掩码来显示图标，而不是传统的背景图像。这使我们能够填充您传递的图标的形状，因此我们可以在选择时动态更改其颜色。要获得传统图像，请使用background-image而不是-webkit-mask-box-image。 Base64编码，你应该仍然很好。

来源

2010-08-07 18:41:00

谢谢，这似乎工作，除了当选择器在图像上时，它隐藏了完整的图像，而不是'通过'发光' – MrSoundless 2010-08-13 07:28:35

对不起，你可以澄清一点评论？我以为我们正在讨论在img上使用选择器。 – 2010-08-14 00:13:08

例如在您的.html文件

.image{ 
-webkit-mask-box-image: url('/public/images/btn.png'); 
}

，并使用上述定义的图像在你的TabPanel

iconCls: 'image',

来源

2012-02-27 11:30:30 Nag

虽然这个问题被问在2010年，它仍然来到了，当我搜索寻求解决方案。这个功能似乎煎茶2.0已经改变了，我花了一段时间的战斗，所以这里是什么是需要2.0兼容性：

CSS /内嵌样式表

.x-tab .x-button-icon.XXXXX, 
.x-button .x-button-icon.x-icon-mask.XXXXX { 
    -webkit-mask-image: url('/img/1.png'); 
}

App.js标签面板定义

{ 
    title: 'Your tab title', 
    iconCls: 'XXXXX' 
}

其中XXXXX是您的自定义图标的名称。

希望有所帮助。

来源

2012-03-08 20:18:25 tonycoupland

TabPanel中的自定义图标失败

回答

相关问题