How to create a dialer pad in ionic


#1

I want to create a dialer -pad in ionic 2 . Please provide me some details on this…
How to design this type of dialer-pad

,I tried it using grid and adding buttons,but I am getting it like this–

This is my html file code:-


<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content >
 <ion-grid>
 <ion-row>
   <ion-col>
     <ion-input type="text" ></ion-input>
   </ion-col>
 </ion-row>
    <ion-row>
        <ion-col>
          <button ion-button color="light" >1 </button>
          
        </ion-col>
        <ion-col>
           <button ion-button color="light">2 ABC</button>
        </ion-col>
        <ion-col>
           <button ion-button color="light" >3 DEF</button>
        </ion-col>
    </ion-row>
 
    <ion-row>
        <ion-col>
           <button ion-button color="light"> 4 GHI</button>
        </ion-col>
        <ion-col>
         <button ion-button color="light">5 JKL</button>
        </ion-col>
        <ion-col>
           <button ion-button color="light">6 MNO</button>
        </ion-col>
    </ion-row>
 
 <ion-row>
        <ion-col>
           <button ion-button color="light"> 7 PQRS</button>
        </ion-col>
        <ion-col>
         <button ion-button color="light">8 TUV</button>
        </ion-col>
        <ion-col>
           <button ion-button color="light">9 WXYZ</button>
        </ion-col>
    </ion-row>
  <ion-row>
        <ion-col>
           <button ion-button color="light">*</button>
        </ion-col>
        <ion-col>
         <button ion-button color="light">0</button>
        </ion-col>
        <ion-col>
           <button ion-button color="light">#</button>
        </ion-col>
    </ion-row>
 <ion-row>  
   <ion-col>
     <button ion-button block color="blue">CALL</button>
   </ion-col>
 </ion-row>
</ion-grid>
</ion-content>

#2

In your buttons add block property
like that

<button ion-button color="light" block > 1 </button>

#3

ok thanks …

Can you help me on how to add that back button there on the input bar…

And also I don’t want the buttons to be visible as in the screenshot…only the text 1 2 3 should be visible…


#4

how to make color of 123 and ABC… different…Please help with this…


#5

For your both questions you can use your button tag like that

<button ion-button color="dark" block clear> 
    2 <span style="margin-left:8px" ion-text color="danger"> ABC</span>
</button>

i wish that will be helpful for you


#6

Thanks a lot for your help…it works fine…