TabPanel のカスタム アイコンが失敗する
-
25-09-2019 - |
質問
TabPanel にカスタム アイコンを追加しようとしていますが、追加すると角の丸い暗いボックスが表示されるだけです。
私のCSSは次のようになります: http://pastebin.org/447682
URL のコードは、Web 上で見つけたランダムな RSS アイコンの Base64 です。また、画像に相対 URL を追加しようとしましたが、成功しませんでした。
ext-touch.css ファイルの Base64 を使用するようにコードを変更すると ( http://pastebin.org/447685 )すべて正常に動作するのに、なぜ私の「カスタム」アイコンを受け入れないのでしょうか?
注記:RSSアイコンは要りません。テスト目的で試しただけです。
解決
MrSoundless - 私は煎茶タッチでテーマエンジンに取り組みました。問題は、下のタブがアイコンではなく、伝統的な背景画像のためのWebKitのマスクを使用することです。これは、私たちはの形状を埋めることができます。の我々は、動的選択にその色を変更することができますので、あなたが、合格アイコンの。そこに、使用background-image
の代わり-webkit-mask-box-image
で伝統的な画像を取得します。 Base64では、あなたはまだ問題ないはずですとしてエンコードます。
他のヒント
.image{
-webkit-mask-box-image: url('/public/images/btn.png');
}
とあなたのtabpanel
で上記で定義された画像を使用しますiconCls: 'image',
この質問は 2010 年に行われたものですが、解決策を探していたときにまだ出てきました。この機能は Sencha 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 はカスタム アイコンの名前です。
それが役立つことを願っています。