a blog for those who code

Saturday 3 October 2015

CSS Components in Ionic - Buttons

In this post we are going to discuss about different variations of Buttons, by size or style. Buttons comes under the CSS components in Ionic and buttons are essential part of any mobile application. In our previous post we have discussed about Page Structure of Ionic Apps, where the buttons can be included in ion-header-bar and ion-content.

Like ion-header-bar (Header directive), buttons also has full spectrum of ionic's default colors. At first we are going to update our ion-content directive in our index.html file. By default button has display: inline-block applied. Default button's code are as follows.

<ion-content class="padding">
  <button class="button">Default Button</button>
  <button class="button button-royal">Royal Button</button>
</ion-content>

Block Button's code are as follows, where you need to add a class button-block. A block button will go to 100% of its parent width.

<ion-content class="padding">
  <button class="button button-block">Default Block Button</button>
  <button class="button button-block button-royal">Royal Block Button</button>
</ion-content>

Full Block Button's code are as follows, where you need to add a class button-full. A full block button will also remove borders on the left and right. This button is very useful when you want to have a button across the entire width of the display.

<ion-content>
  <button class="button button-full">Default Full Button</button>
  <button class="button button-full button-royal">Royal Full Button</button>
</ion-content>

Different sizes of buttons code are as follows, where button-small makes the button smaller and button-large makes the button larger.

<ion-content class="padding">
  <button class="button button-small">Default Small Button</button>
  <button class="button button-large button-royal">Royal Large Button</button>
</ion-content>

Outlined, Clear and Icon Buttons code are as follows, where button-outline is used to apply an outline button style and button-clear is used to remove the border. Icons can be easily added to any button by using built in Ionicons.

<ion-content class="padding">
  <button class="button button-outline">Outline Button</button>
  <button class="button button-clear button-royal">Clear Button</button>
   <button class="button ion-home button-dark">Home Button</button>
</ion-content>

Please Like and Share the CodingDefined Blog, if you find it interesting and helpful.

No comments:

Post a Comment