Working With Button Class In Ionic Blank App Using Visual Studio 2015

Before reading this article, please go through the articles given below.

• Quick Start On Apache Cordova Using Visual Studio 2015
• Getting Started with Ionic Blank App Using Visual Studio 2015

Apache Cordova

Apache Cordova is an open source project, which allows the mobile developers to build the Applications for all major mobile platforms, using HTML, CSS and JavaScript technologies.

Ionic Framework

Ionic is a powerful HTML5 SDK, which helps you to build native-feeling mobile apps, using Web technologies like HTML, CSS and JavaScript.

Building Ionic Blank app with different Button Classes in Visual Studio 2015

Let's see how Ionic Framework makes the use of button classes.

A button is a control, which the user can click to provide an input to an Application. There are several types of buttons in Ionic Framework. All the buttons are subtly animated, which enhances the user experience, while using your app.

Main class for all button types is button. This class will always be applied to all our types of buttons.

Button control allows the user to click it to perform an action. The button control can display both text and images. When the button is clicked, it looks as if it is being pushed in and released.

Let’s see how to build button classes with Ionic bank apps.

Prerequisites

• Visual Studio 2015
• Visual Studio Tools for Apache Cordova.

Follow the steps, mentioned below to use the Button classes in Ionic blank apps using Ionic Framework

Step 1

Create an Ionic blank app

Let’s be ready to create a New Project. Hence, open Visual Studio 2015 and click File -> New -> Project Option is used to create Ionic blank apps, using Ionic Framework. 



Step 2

 

Giving the Project Name

New Project Window will open, where you can select an Installed -> Template -> Java Script -> Apache Cordova Apps ->Ionic JavaScript Blank.

Type Project name ionic-js-ButtonApp and click OK button.



Step 3

Main screen is shown below.



Step 4

 

Adding Button Classes

Go to the Solution bar and choose index.html. This is the starting screen of your app. We can add our HTML coding here.

1. Block Buttons
   Block buttons will always have 100% width of their parent container. You will use button-block class to add block buttons.
   
   
2. Button-Full
   Normally, the button contains the small padding also. If you want to remove the padding but keep full width, you can use button-full class.
   
   
3. Button Size
   There are two Ionic classes to change the button size.
   
   Button-small
   
   
   
   Button Large
   
   
   
   Lets see the examples for the explanation, shown above.
   

   <button class="button button-block">
   button-block
   </button>
   
   <button class="button button-full">
   button-full
   </button>
   
   <button class="button button-small">
   button-small
   </button>
   
   <button class="button button-large">
   button-large
   </button>

   
   
   
4. Button Colors
   We can change the style of your button with the appropriate color class to it.
   
   Ionic framework gives us a set of nine predefined color classes. You can use these colors or you can override it with your own styling.
   
   Following list shows the default set of 9 colors, which are provided by Ionic.
   
   
   
   Now, we change the button color to Green.
   
   
   
   
5. Button Outline(Border)
   If you want your buttons to be transparent; you can apply button-outline class. Buttons with this class will have outline border and transparent background.
   
   To remove the border from button, you can use button-clear class. The example shown below reveals how to use these two classes.
   
   Example
   

   <button class="button button-assertive button-outline">
   Button displayed with outline
   </button>
   <button class="button button-assertive button-clear">
   Button displayed without outline
   </button>

   
   
   
6. Button Icons
   When you want to add Icons to your buttons, we use icon class. You can place an icon on one side of the button by using icon-left or icon-right. There are different types of icons, which are available in Visual Studio.
   
   Example
   

   <button class="button icon ion-home "></button>
   <br /><br />
   <button class="button icon icon-left ion-android-call ">
   Call
   </button>
   <br /><br />
   <button class="button icon icon-right ion-alert ">
   Alert
   </button>

   
   
   
7. Button Bar
   If you want to group couple of buttons together, you can use button-bar class. The buttons will have an equal size by default.
   
   Example
   

   <div class="button-bar">
       <a class="button button-energized">Energized Button</a>
       <a class="button button-assertive">Assertive Button</a>
       <a class="button button-dark">Dark Button</a>
       <a class="button">Simple Button</a>
   </div>

   
   

Step 5 Run the Application

Now, we are ready to run our Project. Click the Ripple – Nexus (Galaxy) to run the Application. (Apache Ripple is a free mobile simulator).



Output

Main screen is shown below.



Output 1

After Adding button control, it will look, as shown.



Output 2

Changing Button Color is shown below.



Output 3

Button Border is given below.



Output 4

Button Icon is displayed below.



Output 5

Button Bar is displayed below.



Conclusion

I hope, you understood how to use the Button classes in Ionic blank app, using Visual Studio 2015 and how to run it.