2

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

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

3 回答 3

4

将图标添加到 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' "属性分配给SegmentedBarxml/"html" 标签；

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

于 2018-01-16T15:09:02.347 回答
1

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

在这里。

于 2019-09-10T15:31:34.673 回答
1

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

请看下面的链接

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

于 2017-05-10T15:06:49.260 回答