在NativeScript中使用字體棒圖標SegmentedBar標題

對於我們的NativeScript Angular2應用程序，我們需要底部對齊的選項卡。我們正試圖通過SegmentedBar來實現這一點（因爲我瞭解tabviews無法在NativeScript-Angular2應用程序中底部對齊）。我如何在分段的條形標題中實現字體棒圖標？我試着將這個unicode保存在items數組中，然後在html中分配一個令人敬畏的類，但是這不起作用。任何其他的選擇？在NativeScript中使用字體棒圖標SegmentedBar標題

我的代碼如下 - segmentedbar.ts：

import { Component, ChangeDetectionStrategy } from "@angular/core"; 
import { SegmentedBarItem } from "ui/segmented-bar"; 

@Component({ 
moduleId: module.id, 
selector: "maintab", 
templateUrl: "./maintab.component.html", 
changeDetection: ChangeDetectionStrategy.OnPush 
}) 
export class MainTabComponent { 
public myItems: Array; 
public prop = "Item " + 0; 

constructor() { 
    this.myItems = []; 
    for (let i = 1; i < 5; i++) { 
     let tmpSegmentedBar: SegmentedBarItem = <SegmentedBarItem>new SegmentedBarItem(); 
     tmpSegmentedBar.title = "Tab " + i; 

     this.myItems.push(tmpSegmentedBar); 
    } 
}

這是我segmentedbar.html

<StackLayout> 
    <StackLayout> 
     <!-- >> segmentedbar-basic-html --> 
     <Label [text]="prop" textWrap="true" vertical-align="center" class="h2 p-15 text-center"></Label> 
     <SegmentedBar class="m-5" #sb [items]="myItems" selectedIndex="0" (selectedIndexChange)="prop='Item '+ sb.selectedIndex"></SegmentedBar><!-- << segmentedbar-basic-html --> 
    </StackLayout> 
</StackLayout>

來源

2017-01-27 Anurag

爲什麼你不只是在HTML模板中包含圖標？ '' –

您可以使用字體真棒圖標很容易 -

1 - 創建一個文件夾命名字體並保留fontawesome-webfront.ttf文件。你可以從fontawesome網站下載它。

2 - 創建一個CSS類像這樣具有相同的名稱，你保存在Fonts文件夾

.font-awesome { 
font-family: "fontawesome-webfont"; 
font-size: 14; 
font-weight: normal; 
text-align: center; 
font-style: normal; 
}

3，現在這樣使用它，無論你想提久事類作爲字體真棒

<Button class="font-awesome" id="add" [text]='"&#xf156;"'(tap)="anyTapEvent()">

來源

2017-02-15 16:25:02 Dlucidone

在NativeScript中使用字體棒圖標SegmentedBar標題

回答

相關問題