How to create full sized buttons in footer toolbar?

Ionic Framework ionic-v3
1

What I did now is to create a bottom toolbar, then within it,
There’s an ion-grid. And within ion-grid, there’s one ion-row, and four ion-col to represent the 4 buttons.

  <ion-col width-25 text-center>
    <button clear class="footer-button">
      <ion-icon name="ios-person-outline"></ion-icon><br>
      <p>xxx<p>
    </button>     
  </ion-col>

However, the buttons are not filling up the toolbar, so that only a small area is responsive to click for each button. what should I do? Thanks!

2

<button clear full>

see doc: http://ionicframework.com/docs/v2/api/components/button/Button/

also you could use <ion-segment> : http://ionicframework.com/docs/v2/api/components/segment/Segment/

1 Like
3

Hey Aaron thanks! Also your Ionic2Firebase code samples are helping me greatly! I’m planning to release a production app in near future.

4

thanks, please do me a favor and star the repo if you find it of value and post issues there if you have any problems with the content.