0

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

我的示例如下，在带有 webkit 掩码的自定义图标上使用 Kendo 的文档化方法：

<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 图标。

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

4

1 回答 1

0

是的，TabStrip 按钮的徽章呈现在图标内，并且掩码将其隐藏。我已经在本周发布的 2013 年第二季度版本中修复了这个问题。

于 2013-07-15T13:03:07.187 回答