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

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

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. 

Ionic

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.

Ionic

Step 3

Main screen is shown below.

Ionic

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.

Ionic
  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

    Ionic

    Button Large

    Ionic

    Lets see the examples for the explanation, shown above.
    1. <button class="button button-block">   
    2. button-block   
    3. </button>  
    4.   
    5. <button class="button button-full">   
    6. button-full   
    7. </button>  
    8.   
    9. <button class="button button-small">   
    10. button-small   
    11. </button>  
    12.   
    13. <button class="button button-large">   
    14. button-large   
    15. </button>  
    Ionic

  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.

    Ionic

    Now, we change the button color to Green.

    Ionic

  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
    1. <button class="button button-assertive button-outline">   
    2. Button displayed with outline   
    3. </button>  
    4. <button class="button button-assertive button-clear">   
    5. Button displayed without outline   
    6. </button>  
    Ionic

  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
    1. <button class="button icon ion-home "></button>  
    2. <br /><br />  
    3. <button class="button icon icon-left ion-android-call ">   
    4. Call   
    5. </button>  
    6. <br /><br />  
    7. <button class="button icon icon-right ion-alert ">   
    8. Alert   
    9. </button>  
    Ionic

  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
    1. <div class="button-bar">  
    2.     <a class="button button-energized">Energized Button</a>  
    3.     <a class="button button-assertive">Assertive Button</a>  
    4.     <a class="button button-dark">Dark Button</a>  
    5.     <a class="button">Simple Button</a>  
    6. </div>  
    Ionic

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).

Ionic

Output

Main screen is shown below.

Ionic

Output 1

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

Ionic

Output 2

Changing Button Color is shown below.

Ionic

Output 3

Button Border is given below.

Ionic

Output 4

Button Icon is displayed below.

Ionic

Output 5

Button Bar is displayed below.

Ionic

Conclusion

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