Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
NativeScript: scrollable application with a fixed bottom navigation with nice icon buttons
<ActionBar title="All cocktails"></ActionBar>
<GridLayout rows="*,60">
<ScrollView row="0">
<WrapLayout orientation="horizontal">
<GridLayout *ngFor="let item of data" width="50%" height="150">
<Image
src="~/images/{{ item.imageURL }}"
stretch="aspectFill"
row="1"
></Image>
<Label
row="1"
text="{{ item.title }}"
horizontalAlignment="center"
verticalAlignment="bottom"
backgroundColor="rgb(81,197,247, 0.8)"
width="100%"
padding="10"
fontSize="13"
color="white"
></Label>
</GridLayout>
</WrapLayout>
</ScrollView>
<StackLayout row="1" orientation="horizontal">
<Button textWrap="true" width="25%" textAlignment="text">
<FormattedString>
<Span text="&#xf015;\n" fontFamily="FontAwesome"></Span>
<Span text="Home"></Span>
</FormattedString>
</Button>
<Button textWrap="true" width="25%" textAlignment="text">
<FormattedString>
<Span text="&#xf000;\n" fontFamily="FontAwesome"></Span>
<Span text="All Cocktails"></Span>
</FormattedString>
</Button>
<Button textWrap="true" width="25%" textAlignment="text">
<FormattedString>
<Span text="&#xf005;\n" fontFamily="FontAwesome"></Span>
<Span text="Favorite"></Span>
</FormattedString>
</Button>
<Button textWrap="true" width="25%" textAlignment="text">
<FormattedString>
<Span text="&#xf007;\n" fontFamily="FontAwesome"></Span>
<Span text="Profile"></Span>
</FormattedString>
</Button>
</StackLayout>
</GridLayout>
@HristoEftimov

This comment has been minimized.

Copy link
Owner Author

commented May 19, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.