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 /＆＃34; html＆＃34;标签;

3：查看http://fontawesome.io/cheatsheet/以确定要使用的图标的unicode，并将该unicode粘贴到相关title标记的SegmentedBarItem属性中。 提示：确保代码格式正确。不要复制备忘单上显示的方括号，就像它们里面出现的字符串一样。

这就是它！您的代码现在看起来应该是这样的：

<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模拟器上显示上述代码的最终结果。

Answer 2

以更灵活的方式，您可以创建自定义的SegmentedBar并根据需要进行调整。阅读更多

here。

Answer 3

SegmentedBar没有为每个SegmentedBarItem分配图像的选项。这是TabView的有效方案。对于SegmentedBar，您只能为整个分段栏设置背景图像，可用于应用图像模式，但不适用于为不同的SegmentedBarItems应用不同的图标

请看下面的链接

https://github.com/NativeScript/nativescript-angular/issues/790