使用自定义图标时 TabStrip 不呈现数据徽章答案

【问题标题】：TabStrip doesn't render data-badge when using custom icons使用自定义图标时 TabStrip 不呈现数据徽章
【发布时间】：2013-07-14 13:04:25
【问题描述】：

在 Kendo UI Mobile 版本 v2013.1.621 中，我使用带有自定义图标的 TabStrip。这一切都很好，除了我想添加 data-badges 到它。不知何故，自定义图标/图像的 webkit-mask 完全“隐藏”了数据徽章。

我的例子如下，使用剑道的documented approach on custom icons with webkit masks:

<div id="footer-tab">

    <style scoped>
        /* Custom TabStrip Icons */
        #footer-tab .km-icon {
            background-size: 100% 100%;
            -webkit-background-clip: border-box;
            background-color: gray;
        }

        .km-demo-icon1 {
            -webkit-mask-box-image: url("images/icons/icon-1.png");
            background-color: #b2f23d;              
        }

        .km-demo-icon2 {
            /* ISSUE IS HERE: Remove the -webkit below, and the badge works. */
            -webkit-mask-box-image: url("images/icons/icon-2.png");
            background-color: #b2f23d;              
        }
    </style>

    <div data-role="tabstrip">
        <!-- Custom Icons be here... -->
        <a href="page1.html" data-icon="demo-icon1">PAGE1</a>
        <a href="page2.html" data-icon="demo-icon2" data-badge="99">PAGE2</a>
    </div>

</div>

同样，自定义图标在 iOS 和 Android 上都运行良好。但是当我附加 data-badge="99" 属性时，徽章根本不显示。通过检查 DOM，它看起来就位，但完全不可见。

删除wekit-mask-box-image 行（如上面示例中指定的那样）会使数据徽章出现，但不会呈现自定义 TabStrip 图标。

看起来很直截了当，但我似乎无法指出这里出了什么问题。有什么建议吗？

【问题讨论】：

标签： kendo-ui kendo-mobile

【解决方案1】：

是的，TabStrip 按钮的标记在图标内呈现，而遮罩将其隐藏。我已经在本周发布的 2013 年第二季度版本中解决了这个问题。

【讨论】：

啊，那太好了。期待！