Question

在Kendo UI Mobile版本v2013.1.621中，我使用带有自定义图标的TabStrip。这一切都运行良好，除了我想要添加数据徽章。不知何故，自定义图标/图像的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图标。

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

Answer 1

是的，TabStrip按钮的徽章将在图标内呈现，并且蒙版正在隐藏它。我已经为2013年第二季度发布了这个版本，这将在本周发布。

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

1 个答案: