如何将按钮图标添加到NativeScript中的ActionBar？

大家好！如何将按钮图标添加到NativeScript中的ActionBar？

我想添加一个汉堡菜单图标到我的Nativescript应用程序的ActionBar中，这会触发一个侧面抽屉，但我无法添加该菜单图标。

这是我.xml到目前为止的代码：

<dpg:DrawerPage loaded="pageLoaded" navigatedTo="onNavigatingTo" 
xmlns:dpg="nativescript-telerik-ui/sidedrawer/drawerpage" 
xmlns:drawer="nativescript-telerik-ui/sidedrawer" 
xmlns:sdc="views/side-drawer-content" 
xmlns="http://www.nativescript.org/tns.xsd"> 
<navigation.actionBar> 
    <ActionBar title="Drawer Over Navigation"> 
    <android> 
     <NavigationButton icon="res://ic_menu" tap="toggleDrawer" /> 
    </android> 
    <ios> 
     <ActionItem icon="res://ic_menu" ios.position="left" tap="toggleDrawer" /> 
    </ios> 
    </ActionBar> 
</navigation.actionBar> 

<dpg:DrawerPage.sideDrawer> 
<drawer:RadSideDrawer id="drawer"> 
    <drawer:RadSideDrawer.drawerContent> 
    <sdc:side-drawer-content /> 
    </drawer:RadSideDrawer.drawerContent> 
</drawer:RadSideDrawer> 
</dpg:DrawerPage.sideDrawer> 

<StackLayout cssClass="mainContent"> 
    <Label text="{{ exampleText }}" textWrap="true" cssClass="drawerContentText"/> 
    <Button text="Toggle Drawer" tap="toggleDrawer" icon="res://ic_menu" /> 
</StackLayout> 
</dpg:DrawerPage>

我认为相关的部分是在这里，但我看不出这可能是我的错误。

<ActionBar title="Drawer Over Navigation"> 
    <android> 
     <NavigationButton icon="res://ic_menu" tap="toggleDrawer" /> 
    </android> 
    <ioThanks in advance!s> 
     <ActionItem icon="res://ic_menu" ios.position="left" tap="toggleDrawer" /> 
    </ios> 
</ActionBar>

请告诉我任何额外的信息，我可以提供使这个问题更清楚。

在此先感谢！

来源

2016-10-10 Gonzalo Diaz Ailan

选项1）

文档是假设你已经有了图像ic_menu在你的资源文件夹（应用程序/ App_Resources /安卓/绘项目-XXX Android和应用程序/ App_Resources/iOS/Assets.xcassets）。例子可以发现here

如果你没有这个图像（缩放为不同的设备），那么你应该提供它。这个概念几乎与AppIcons（article here）所做的相同。还有用于自动生成不同比例图像的工具 - 例如this one here。

选项2）

注意：这将工作只与the syntax for custom ActionItems

另一种适用的方法是用IconFonts，而不是图像创建你的汉堡包菜单（这将是针对不同分辨率精确调整大小）

示例：

1）Use this instead of image

2）导入文件夹中的字体图标字体example here

3）创建CSS类

.font-awesome { 
    font-family: "FontAwesome"; 
    font-size: 14; 
    font-weight: normal; 
    text-align: center; 
}

4）应用的代码，你想要的字形（在这种情况下，汉堡菜单）

<Button text="&#xf0c9;" class="font-awesome" tap="" />

来源

2016-10-10 14:58:27

非常感谢您的答案！但是，当我按照你的例子，我得到一个按字面意思“＆＃xf0c9”，而不是汉堡菜单的Unicode字符= O –

对于android，font-family属性必须是字体文件的名称（不包括引号）。例如，你有'app/fonts/fontawesome.tff'，然后在CSS中：'font-family：fontawesome;' –

@DinhLe我按照你的说法做了：'fontawesome-webfont.ttf'是文件名和属性在CSS是'font-family：fontawesome-webfont'，但它没有奏效=（ –

如何将按钮图标添加到NativeScript中的ActionBar？

回答

相关问题