I am very new to Nativescript UI. How can I place footer in Nativescript with angular2.
I am designing page with tabs. where i need to show list view and footer in one tab. List view is working perfect as like in below image. My concern is to design footer and fab button. I don't have much experience on changes.
Code follows :
<TabView [selectedIndex]="tabindex" selectedColor="#FF0000">
<StackLayout *tabItem="{title: 'Appertiser'}" >
<Label text="Hello, I am Appertiser" marginTop="20" fontSize="20" horizontalAlignment="center" textAlignment="center"></Label>
</StackLayout>
<StackLayout *tabItem="{title: 'Noodles'}" >
<ListView [items]="products">
<template let-item="item">
<GridLayout rows="auto" columns="auto,*" class="list-wrapper">
<Image row="0" col="0" [src]="item.productImage" horizontalAlignment="left"></Image>
<StackLayout row="0" col="1" orientation="vertical" horizontalAlignment="left" class="productDetail">
<Label [text]='item.productName' horizontalAlignment="left" class="productHeading"></Label>
<Label [text]='item.productShortDescription' horizontalAlignment="left" class="productDescription"></Label>
<Label [text]='item.productTags' horizontalAlignment="left" class="productTags"></Label>
</StackLayout>
<Image row="0" col="2" [src]="item.iconImage" width="20px" height="20px" horizontalAlignment="right" verticalAlignment="top" marginRight="10"></Image>
<GridLayout row="0" col="3" orientation="vertical" verticalAlignment="bottom">
<Label [text]='item.productPrice' class="productPrice" textColor="red" horizontalAlignment="right" class="productPrice"></Label>
</GridLayout>
</GridLayout>
</template>
</ListView>
<FAB (tap)="toggleNav('Home')" rippleColor="#f1f1f1" class="fab-button"></FAB>
</StackLayout>
<StackLayout *tabItem="{title: 'Seafood'}">
<Label text="Hello, I am Seafood" marginTop="20" fontSize="20" textAlignment="left"></Label>
<GridLayout row="1" column="0" rows="auto" columns="50,*,50" verticalAlignment="bottom" backgroundColor="lightgray" cssClass="footer">
<Label text="My cat loves the camera" textWrap="true" col="1" colSpan="2" minHeight="50" fontSize="20" margin="3"></Label>
<Label text="John Smith" col="1" row="1" fontSize="14" horizontalAlignment="left" verticalAlignment="bottom" margin="3"></Label>
<Label text="comments: 26" col="2" row="1" color="#10C2B0" fontSize="14" verticalAlignment="bottom" margin="3"></Label>
</GridLayout>
<GridLayout cssClass="footer" row="1" column="0" rows="auto" columns="50,*,50">
<Image src="{{flag}}" cssClass="flagimage" col="0" row="0"></Image>
<Label text="{{lang}}" tap="{{goDefault}}" col="1" row="0" textAlignment="left"></Label>
<Image src="~/res/icons/white/ellipsis_white.png" cssClass="iconwhitesmall" tap="{{goOther}}" row="0" col="2"></Image>
</GridLayout>
</StackLayout>
In order to get familiar with NativeScript + Angular-2 I wo8uld recommend to check out this sample app where a number of basic scenarios are shown.
As for your question - What exactly do you mean by "footer" !? A semantic footer layout for main page or menu or maybe a footer for list-view controller ? The answer depends on your specific needs so please share a code of what you have done so far and what you are trying to achieve.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.