nativescript - nativescript 分段栏中的图像图标

Question

如何在 nativescript-angular 中的分段栏中添加图像图标。你能帮我解决这个问题吗

 <SegmentedBar #tabs [selectedIndex]="selectSegment">
                <SegmentedBarItem title="test1"></SegmentedBarItem>
                <SegmentedBarItem title="test2"></SegmentedBarItem>
                <SegmentedBarItem title="test3"></SegmentedBarItem>
                <SegmentedBarItem title="test4"></SegmentedBarItem>
        </SegmentedBar>

Answer 1

向 Nativescript Segmented Bar 项目添加图标的一种简单方法是使用 FontAwsome(或与此相关的任何其他图标字体)。

1:观看这个 ( http://www.nativescriptsnacks.com/videos/2016/03/07/nativescript-and-font-awesome.html) 简短的五分钟视频，了解如何将 FontAwsome 安装到您的 {N} 应用。

2:安装图标字体后。将 style="font-family: 'fontAwesome' " 属性分配给 SegmentedBar xml/"html"标签；

3:查看http://fontawesome.io/cheatsheet/找出您要使用的图标的 unicode，并将该 unicode 粘贴到相关 SegmentedBarItem 标记的 title 属性。 提示:确保代码的格式正确。不要复制备忘单上显示的方括号，只复制其中出现的字符串。

就是这样!您的代码现在应如下所示:

<SegmentedBar #tabs [selectedIndex]="selectSegment" style="font-family: 'FontAwesome'; color: #eee; background-color: #31394C;">
            <SegmentedBarItem title="&#xf0c0;"></SegmentedBarItem>
            <SegmentedBarItem title="&#xf007;"></SegmentedBarItem>
            <SegmentedBarItem title="&#xf008;"></SegmentedBarItem>
            <SegmentedBarItem title="&#xf0f3;"></SegmentedBarItem>
</SegmentedBar>

这张图片:

显示上述代码在 android 模拟器上的最终结果。