在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标题

回答

相关问题