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 年第 2 四半期のリリースで修正されました。

于 2013-07-15T13:03:07.187 に答える