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

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

请看下面link

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

Answer 2

向 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 模拟器上的最终结果。

Answer 3

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

here.

nativescript 分段栏中的图像图标

image icon in segmented bar in nativescript

nativescript

angular2-nativescript

nativescript-angular