使用Angular2在NativeScript中复制Ionic2样式的左侧菜单

时间:2016-10-26 05:34:52

标签: ionic2 angular2-nativescript nativescript-telerik-ui

Ionic2根据图像提供了带有左菜单滑块的漂亮模板:

enter image description here

enter image description here

Angular2是否有任何NativeScript方法?

我已将npm i nativescript-telerik-ui安装到项目中,并按照示例http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/SideDrawer/getting-started将html代码置于我的文件中:

<RadSideDrawer exampleTitle toggleNavButton>
    <StackLayout tkDrawerContent class="sideStackLayout">
        <StackLayout class="sideTitleStackLayout">
            <Label text="Navigation Menu"></Label>
        </StackLayout>
        <StackLayout class="sideStackLayout">
            <Label text="Primary" class="sideLabel sideLightGrayLabel"></Label>
            <Label text="Social" class="sideLabel"></Label>
            <Label text="Promotions" class="sideLabel"></Label>
            <Label text="Labels" class="sideLabel sideLightGrayLabel"></Label>
            <Label text="Important" class="sideLabel"></Label>
            <Label text="Starred" class="sideLabel"></Label>
            <Label text="Sent Mail" class="sideLabel"></Label>
            <Label text="Drafts" class="sideLabel"></Label>
        </StackLayout>
    </StackLayout>
    <StackLayout tkMainContent>
        <Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label>
        <Button text="OPEN DRAWER" (tap)=openDrawer()></Button>
    </StackLayout>
</RadSideDrawer>

但是一旦我跑tns run android --emulator,我就看不到Deawer出现在屏幕上了。

1 个答案:

答案 0 :(得分:0)

也许您忘记将SIDEDRAWER_DIRECTIVES包含在引导declarations的{​​{1}}中。

您可以在{N} + Angular应用程序here中查看有关如何使用RadSideDrawer或 nativescript-telerik-ui 插件的任何其他UI元素的完整详细信息。有关RadSideDrawer的具体细节,您可以查看其官方文档here