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

Part 12 how to use alerts in ionic

in this video, i will show you that how you can use alerts in you ionic application.

Alerts are a great way to offer the user the ability to choose a specific action or list of actions. They also can provide the user with important information, or require them to make a decision (or multiple decisions).

From a UI perspective, Alerts can be thought of as a type of “floating” modal that covers only a portion of the screen. This means Alerts should only be used for quick actions like password verification, small app notifications, or quick options. More in-depth user flows should be reserved for full-screen Modals.



step 1 first import this in your page:



import { AlertController } from 'ionic-angular';


step 2 inside class constructor create instance


export class MyPage {
constructor(public alertCtrl: AlertController) {
}


step 3 create method and call inside button
showAlert() {
let alert = this.alertCtrl.create({
title: 'dotnetlab!',
subTitle: 'notification from dotnetlab',
buttons: ['OK']
});
alert.present();
}
}



step 4 call inside button

<button ion-button (click)="showAlert()">click me</button>

====================================================

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

Part 11 inputs in ionic hindi

in this video i will show you inputs elements in ionic application.

Inputs are essential for collecting and handling user input in a secure way. They should follow styling and interaction guidelines for each platform, so that they are intuitive for users to interact with. Ionic uses Angular 2’s form library, which can be thought of as two dependent pieces, Controls, and Control Groups.

Each input field in a form has a Control, a function that binds to the value in the field, and performs validation. A Control Group is a collection of Controls. Control Groups handle form submission, and provide a high-level API that can be used to determine whether the entire form is valid.



Fixed Inline Labels

Floating Labels

Inline Labels

Inset Labels

Placeholder Labels

Stacked Labels



Fixed Inline Labels.



<ion-list>

<ion-item>
<ion-label fixed>Username</ion-label>
<ion-input type="text" value=""></ion-input>
</ion-item>

<ion-item>
<ion-label fixed>Password</ion-label>
<ion-input type="password"></ion-input>
</ion-item>

</ion-list>



====================================================

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

Part 10 how to use Floating action buttons (FABs) in ionic

FABs (Floating Action Buttons) are standard material design components. They are shaped like a circle that represents a promoted action. When pressed, it may contain more related actions. FABs, as its name suggests, are floating over the content in a fixed position.



<ion-fab top right edge> // left botton and top can be used

    <button ion-fab mini><ion-icon name="add"></ion-icon></button>

    <ion-fab-list>

      <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>

      <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>

      <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>

      <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>

    </ion-fab-list>

  </ion-fab>

====================================================

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

Part 9 radio button in ionic

Like the checkbox, a radio is an input component that holds a boolean value. Under the hood, radios are no different than HTML radio inputs. However, like other Ionic components, radios are styled differently on each platform. Unlike checkboxes, radio components form a group, where only one radio can be selected at a time. Use the checked attribute to set the default value, and the disabled attribute to disable the user from changing to that value.



<ion-list radio-group>

  <ion-list-header>

    Select Gender

  </ion-list-header>



  <ion-item>

    <ion-label>Male</ion-label>

    <ion-radio checked="true" value="male"></ion-radio>

  </ion-item>



  <ion-item>

    <ion-label>Female</ion-label>

    <ion-radio value="female"></ion-radio>

  </ion-item>



</ion-list>

Part 8 checkbox component in ionic

in this video, I will show you that how you can use checkbox component in your ionic application.

A checkbox is an input component that holds a boolean value. Checkboxes are no different than HTML checkbox inputs. However, like other Ionic components, checkboxes are styled differently on each platform. Use the checked attribute to set the default value, and the disabled attribute to disable the user from changing the value.



<ion-item>

  <ion-label>Cricket</ion-label>

  <ion-checkbox color="dark" checked="true"></ion-checkbox>

</ion-item>



<ion-item>

  <ion-label>Football</ion-label>

  <ion-checkbox disabled="true"></ion-checkbox>

</ion-item>

====================================================

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



website : - http://dotnetlab.in/

facebook page :- https://www.facebook.com/DotnetLab-1896440207343189/

visit my blog : - http://aspnetinhindi.blogspot.in

follow me on twitter : https://twitter.com/THEJOGRANA

Part 7 how to use cards in ionic

In this video, I will show you that how you can use ionic card UI components the card component are very basic and mostly use the component in many application today.
Cards are a great way to display important pieces of content, and are quickly emerging as a core design pattern for apps
They are a great way to contain and organize information, while also setting up predictable expectations for the user.
With so much content to display at once, and often so little screen real estate, cards have fast become the design pattern of choice for many companies, including the likes of Google, Twitter, and Spotify.
you can create cards with
Card Lists
Card Images
Background Images
Advanced Cards
Basic Cards
Card Headers

<ion-card>



  <ion-card-header>

   //  Card Header

  </ion-card-header>



  <ion-card-content>

    <!-- your card content will be here -->

  </ion-card-content>



</ion-card>

Cards with Header 

<ion-card>

  <ion-card-header>

   News

  </ion-card-header>

  <ion-card-content>

    News from India

 </ion-card-content>

</ion-card>

Card Lists

Card Images

Background Images

Advanced Cards