Post
Ask Question

Ionic Css Components - Part One

Here are the steps: 

Step 1: Open Git Bash

Git Bash

Now create your project, here we are creating our project with the name Test. The default directory where it will save is C:\Users\shubhamk\Test

create

create

After completion we can check if our project is in its default directory.

directory

Now open your project to code in Visual Studio Code,

open
open

Now open index.html placed inside the www directory. It will be the default page of our application. Now run the project but first go to the directory Test using command,

$ cd Test

And then run

$ ionic serve

command

To stop the running ionic app use ionic $ q - it will stop the project.

Now we are going to use CSS components in our project which “Ionic Framework official website" states are as follows.

CSS Component - Header

Header is the region at the top of a screen that can contain various types of content. In Ionic we can create headers with a different look & feel, below we are going to discuss most of them are available. Here we are going to change in code of index.html and for every change we only need to change <ion-header-bar> classes.

Index.html
  1. <body ng-app="starter">  
  2.     <ion-pane>  
  3.       <ion-header-bar class="bar-light">  
  4.         <h1 class="title">Ionic Header With bar-light</h1>  
  5.       </ion-header-bar>  
  6.       <ion-content>  
  7.       </ion-content>  
  8.     </ion-pane>  
  9.   </body>  
header

In above code we created a Header bar by using a class in its bar-light. This class will apply a light color theme on the Header. For different color theme we only need to change in class as given below:

bar-stable
  1. <ion-header-bar class="bar-stable">  
  2. <h1 class="title">Ionic Header With bar-stable</h1>  
  3. </ion-header-bar>  
bar

bar-positive

bar-positive

Bar-calm

Bar-calm

Bar-balanced

Bar-balanced

bar-energized

bar-energized

bar-assertive

 bar-assertive

bar-royal

bar-royal

bar-dark

bar-dark

Sub Header

This bar can be placed below the original header bar. Like Header bar here also we can change the class to change the color theme specifying the type of bar.
  1. <body ng-app="starter">  
  2.     <ion-pane>  
  3.       <ion-header-bar class="bar-positive">  
  4.         <h1 class="title">Ionic Header With bar-dark</h1>  
  5.       </ion-header-bar>  
  6.       <ion-header-bar class="bar bar-subheader bar-calm">  
  7.           <h2 class="title">Sub Header</h2>  
  8.       </ion-header-bar>  
  9.       <ion-content>  
  10.       </ion-content>  
  11.     </ion-pane>  
  12.   </body>
sub header

In above code inside the <ion-header-bar> we provided three different class, there 1st class is bar which is to create a bar only, after that we used 2nd class bar-subheader which is placing this bar to the below of Original Header bar and after that 3rd class is applied for color theme.

CSS- Component- Footer

As Headers, Footers are regions at the bottom of a screen that can contain various types of content. Footers have the same color options like Header.
  1. <body ng-app="starter">  
  2.     <ion-pane>  
  3.       <ion-header-bar class="bar-positive">  
  4.         <h1 class="title">Ionic Header</h1>  
  5.       </ion-header-bar>  
  6.       <ion-header-bar class="bar bar-subheader bar-calm">  
  7.           <h2 class="title">Sub Header</h2>  
  8.       </ion-header-bar>  
  9.       <ion-content>  
  10.       </ion-content>  
  11.       <ion-footer-bar class="bar-assertive">  
  12.           <button class="button button-clear">Left</button>  
  13.           <h1 class="title">Ionic Footer</h1>  
  14.           <button class="button button-clear">Right</button>  
  15.       </ion-footer-bar>  
  16.     </ion-pane>  
  17.   </body>  
sub header

In above code we created a footer with <ion-footer-bar>, in this we also applied a class for its color & here inside this tag we also used 2 buttons and 1 heading, described inside the footer tag here that will display only inside the footer.

CSS Component- Button

In Ionic, since button also has lots of different properties like its type, size, color, outline, icons etc. in code below we are going to use all the classes of color for button.

Button colors
  1. <body ng-app="starter">  
  2.     <ion-pane>  
  3.       <ion-header-bar class="bar-positive">  
  4.         <h1 class="title">Ionic Header</h1>  
  5.       </ion-header-bar>  
  6.       <ion-header-bar class="bar bar-subheader bar-calm">  
  7.           <h2 class="title">Sub Header</h2>  
  8.       </ion-header-bar>  
  9.       <ion-content>  
  10.           <button class="button">Default</button><br/>  
  11.           <button class="button button-light">button-light</button><br/>  
  12.           <button class="button button-stable">button-stable</button><br/>  
  13.           <button class="button button-positive">button-positive</button><br/>  
  14.           <button class="button button-calm">button-calm</button><br/>  
  15.           <button class="button button-balanced">button-balanced</button><br/>  
  16.           <button class="button button-energized">button-energized</button><br/>  
  17.           <button class="button button-assertive">button-assertive</button><br/>  
  18.           <button class="button button-royal">button-royal</button><br/>  
  19.           <button class="button button-dark">button-dark</button>  
  20.       </ion-content>  
  21.       <ion-footer-bar class="bar-assertive">  
  22.           <h1 class="title">Ionic Footer</h1>  
  23.       </ion-footer-bar>  
  24.     </ion-pane>  
  25.       
  26.   </body>  
positive

Button Types

There are different types of buttons available, in below code we will use,
  • Block Button
  • Full-width Block Button
  • Outlined Button
  • Clear Button
  1. <button class="button button-block button-positive">Block Button</button><br/>  
  2.          <button class="button button-full button-positive">Full Width Block Button</button><br/>  
  3.          <button class="button button-outline button-positive">Outlined Button</button><br/>  
  4.          <button class="button button-clear button-positive">Clear Button</button>  
  5.       </ion-content>  
block


Button Sizes

Here in the below code we used small and large size for buttons.
  1. <button class="button button-small button-assertive">  
  2.   
  3. Small Button  
  4.   
  5. </button>   
  1. <button class="button button-large button-positive">  
  2.   
  3. Large Button  
  4.   
  5. </button> 
Large Button

Button with Icons

In Ionic we can add Icons to buttons using icon class. We can place icon on one side of the button by using icon-left or icon-right.
  1. <button class="button"><i class="icon ion-loading-c"></i> Loading..</button><br/>  
  2.          <button class="button icon-left ion-home">Home</button><br/>  
  3.          <button class="button icon-left ion-star button-positive">Favorites</button><br/>  
  4.          <a class="button icon-right ion-chevron-right button-calm">Learn More</a><br/>  
  5.          <a class="button icon-left ion-chevron-left button-clear button-dark">Back</a><br/>  
  6.          <button class="button icon ion-gear-a"></button><br/>  
  7.          <a class="button button-icon icon ion-settings"></a><br/>  
  8.          <a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a><br/>  
Button with Icons

Buttons in Headers
  1. <ion-header-bar class="bar-positive">  
  2.           <button class="button icon ion-navicon"></button>  
  3.         <h1 class="title">Ionic Header</h1>  
  4.         <button class="button">Edit</button>  
  5.       </ion-header-bar>  
Buttons in Headers

Clear Buttons
  1. <ion-header-bar class="bar-positive">  
  2.           <button class="button button-icon icon ion-navicon"></button>  
  3.         <h1 class="title">Ionic Header</h1>  
  4.         <button class="button button-clear button-energized">Edit</button>  
  5.       </ion-header-bar> 
Clear Buttons

In this article we tried to work with some of CSS Components available in Ionic Framework. Working with the Ionic framework you can easily realize this is really time saving to make any UI in ionic.
 
Read more articles on Ionic:


Similar Articles