Ionic Button

From WikiOD

Ionic button[edit | edit source]

Buttons are an indispensable part of mobile apps. Different styles of apps require different button styles.

By default, the button display style is: display: inline-block .

 <button class="button">
   Default
 </button>
 
 <button class="button button-light">
   button-light
 </button>
 
 <button class="button button-stable">
   button-stable
 </button>
 
 <button class="button button-positive">
   button-positive
 </button>
 
 <button class="button button-calm">
   button-calm
 </button>
 
 <button class="button button-balanced">
   button-balanced
 </button>
 
 <button class="button button-energized">
   button-energized
 </button>
 
 <button class="button button-assertive">
   button-assertive
 </button>
 
 <button class="button button-royal">
   button-royal
 </button>
 
 <button class="button button-dark">
   button-dark
 </button>

The button-block style button is displayed as: display: block , it will completely fill the width of the parent element, including padding.

 <button class="button button-block button-positive">
   Block Button
 </button>

Using the button-full class, you can display the full width of the button without padding.

 <button class="button button-full button-positive">
   Full Width Block Button
 </button>
----

Buttons of different sizes[edit | edit source]

button-large is set to a large button, and button-small is set to a small button.

 <button class="button button-small button-assertive">
   Small Button
 </button>
 <button class="button button-large button-positive">
   Large Button
 </button>
----

No background button[edit | edit source]

button-outline Set the background to be transparent.

 <button class="button button-outline button-positive">
   Outlined Button
 </button>
----

Button without background and border[edit | edit source]

button-clear Set the button background to be transparent and without borders.

 <button class="button button-clear button-positive">
   Clear Button
 </button>
----

Icon button[edit | edit source]

We can add icons to the buttons.

 <button class="button">
   <code><i class="icon ion-loading-c"></i></code> Loading...
 </button>
 
 <button class="button icon-left ion-home">Home</button>
 
 <button class="button icon-left ion-star button-positive">Favorites</button>
 
 <a class="button icon-right ion-chevron-right button-calm">Learn More</a>
 
 <a class="button icon-left ion-chevron-left button-clear button-dark">Back</a>
 
 <button class="button icon ion-gear-a"></button>
 
 <a class="button button-icon icon ion-settings"></a>
 
 <a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a>
----

Add buttons at the head/bottom[edit | edit source]

Buttons can be added to the head/bottom, and the style of the button is set according to the head/bottom, so you don't need to add additional styles to the button.

 <code><div class="bar bar-header"></code>
   <button class="button icon ion-navicon"></button>
   <code><h1 class="title">Header Buttons</h1></code>
   <button class="button">Edit</button>
 <code></div></code>
The button-clear class can set the head/bottom buttons without background and border.
 <code><div class="bar bar-header"></code>
   <button class="button button-icon icon ion-navicon"></button>
   <code><div class="h1 title">Header Buttons</div></code>
   <button class="button button-clear button-positive">Edit</button>
 <code></div></code>
----

Button bar[edit | edit source]

We can use the button-bar class to set the button bar. In the following example, we have added a button bar to the header and content.

 <code><div class="button-bar"></code>
   <a class="button">First</a>
   <a class="button">Second</a>
   <a class="button">Third</a>
 <code></div></code>