Tuesday 12 December 2017

Part 13 how to use segments in ionic





in this video, i will show you that how you can create whatsApp like theme using ionic segments UI components.
The segment is a collection of buttons that are displayed in a line. They can act as a filter, showing/hiding elements based on the value of the segment




<div padding>
<ion-segment [(ngModel)]="pet">
<ion-segment-button value="kittens">
Kittens
</ion-segment-button>
<ion-segment-button value="puppies">
Puppies
</ion-segment-button>
</ion-segment>
</div>

<div [ngSwitch]="pet">
<ion-list *ngSwitchCase="'puppies'">
<ion-item>
<ion-thumbnail item-start>
<img src="source../">
</ion-thumbnail>
<h2>Ruby</h2>
</ion-item>
...
</ion-list>

<ion-list *ngSwitchCase="'kittens'">
<ion-item>
<ion-thumbnail item-start>
<img src="source../">
</ion-thumbnail>
<h2>Luna</h2>
</ion-item>
</ion-list>
</div>


====================================================
to download full source code and presentation visit our wesite and Blog

website : - http://dotnetlab.in/
source code : - https://github.com/rahuljograna
facebook page :- https://www.facebook.com/DotnetLab-1896440207343189/
visit my blog : - http://aspnetinhindi.blogspot.in
follow me on twitter : https://twitter.com/THEJOGRANA




No comments:

Post a Comment

Part 20 consuming rest api in ionic

in this video, I will show you that how you can consume the rest API. in the previous video we have implemented the asp.net web API projec...