ASP.NET From Scratch

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>



</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

Part 6 how to use Buttons in ionic

In this video tutorial, i will show you that how you can use button component in your ionic application.

Buttons are an essential way to interact with and navigate through an app, and should clearly communicate what action will occur after the user taps them. Buttons can consist of text and/or an icon and can be enhanced with a wide variety of attributes.

For accessibility reasons, buttons use a standard button element but are enhanced with an ion-button directive.

https://ionicframework.com/docs/components/index.html#buttons

you can create button with this types

Default Style

Outline Style

Clear Style

Round Buttons

Block Buttons

Full Buttons

Button Sizes

Icon Buttons

Buttons In Components

<button ion-button>Button</button> // ion-button means this is ionic button

you can use additional attributes like color, outline, clear, block, full small large as well

<button ion-button>Default</button>

<button ion-button small>Small</button>

<button ion-button large>Large</button>

with icons

<button ion-button icon-left>

<ion-icon name="home"></ion-icon>

home

</button>

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

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 5 UI components of ionic hindi

In this video, I will describe the UI components of ionic .
Ionic apps are made of high-level building blocks called components. Components allow you to quickly construct an interface for your app. Ionic comes with a number of components, including models, popups, and cards.

Ionic provides lots of built-in UI Components that will help you to design your application user-friendly.
Some of built-in components are
Button, Radio Button, Checkbox, alerts, cards, slides etc
We can use this UI component by using Javascript or CSS.
This UI component is derived from ionic-angular library
The ionic-angular library contains basics of all UI components like button and many others.
In our upcoming videos we will discuss all of the components of UI
So please watch all the videos tutorials.

====================================================
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