2016-11-30 14 views
0

I持って、私はここに角度2NativeScriptタブのアイコンとBagdes

<TabView> 
    <StackLayout *tabItem="{title: '&#xf015; Profile &#xf1e0;" > 
    <Label class="fa" text="&#xf015;"></Label> 
<Button class="fa" id="button" text="&#xf1e0; Tap me!" ></Button> 
    </StackLayout> 
    <StackLayout *tabItem="{title: '&#xf015; Stats"> 
     <Label text="Second tab item"></Label> 
    </StackLayout> 

    <StackLayout *tabItem="{title: 'Settings'}"> 
     <Label text="Third tab item"></Label> 
    </StackLayout> 
</TabView> 

<StackLayout *tabItem="{title: '&#xf015; Profile &#xf1e0;" > 

私は、次のようにtabTitleのアイコンを設定していているとNativeScriptで作成した私のアプリのために、次のコードfontAwesomeを使用していますが、設定されているアイコンはタブタイトルには表示されません。不足しているアイコンのプレースホルダも表示されません。

ラベルとボタンのアイコンが表示されます。

、更新がある場合にこれが有用である以下の図に示すように、私はタブにバッジを追加することができる方法

enter image description here

があります。

答えて

2

現在、* tabItemはhereの理由でアイコンフォントをサポートしていません。 回避策として、アイコンソースを使用して、タブに画像を提供することができます。

<StackLayout *tabItem="{title: 'My Title', iconSource:'res://icon'}"> 
+0

返信いただきありがとうございます。イメージを変更する方法があります。パスをバインドするのに疲れました。* tabItem = '{{iconObj.value}}' ...画像を動的に変更したいのですがビューの更新を表すために上に示されています。 – krv

0

@Nickが述べたように、tabItemは現在のところアイコンフォントをサポートしていません。私はあなたのような問題を抱えていました。アイコンとバッジでタブバーを実装する必要がありました。これが私のやり方です。本当に良い練習ではありませんが、何とか役立つことを願っています。

DockLayoutのセットプロパティdock="bottom"(偽のTabBar)内にGridLayoutを作成しました。 GridLayoutの中で、アイコンフォントでテキストを表示できる一連のラベルを作った。また、スワイプジェスチャリスナーを追加して、ユーザーがスワイプでタブを変更できるようにしました。それは一時的に問題を解決するかもしれない考えです。

関連する問題