Button-bar alternative in ionic?


#1

Seems ionic 2 dropped the button bar component, wondering if there’s any alternative?
Ionic 1: http://ionicframework.com/docs/components/#button-bar

Thanks.


#2

Maybe you’re looking for Segment bars? http://ionicframework.com/docs/v2/components/#segment


#3

thanks, I’ve now added Bootstrap into my ionic 2 project:
http://getbootstrap.com/components/#btn-groups


#4

I found the best way to create a “button bar”, as in to align your buttons without having to use CSS, in ionic 2 is to use the new Grid component. http://ionicframework.com/docs/v2/components/#grid

<ion-grid>
 <ion-row>
  <ion-col width-50><button style="width:100%">Clear</button></ion-col>
  <ion-col width-50><button style="width:100%">Save</button></ion-col>
</ion-row>
</ion-grid>


#5

@iamsamhk You don’t need use bootstrap for this…
I’m using css and grid for this…
Check my solutions:

HTML:

<ion-grid class="button-group">
  <ion-row>
    <ion-col>
      <button ion-button block color="primary">One</button>
    </ion-col>
    <ion-col>
      <button ion-button block color="secondary">Two</button>
    </ion-col>
    <ion-col>
      <button ion-button block color="danger">Three</button>
    </ion-col>
  </ion-row>
</ion-grid>

SCSS

.button-group {
  .col {
    &:first-child:not(:last-child) {
      padding-right: 0;
      .button {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
    &:not(:first-child):not(:last-child) {
      padding-right: 0;
      padding-left: 0;
      .button {
        border-radius: 0;
      }
    }
    &:last-child:not(:first-child) {
      padding-left: 0;
      .button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }
}

RESULT:


Button Bar in Ionic 2
#6

Thanks, that’s quite helpful. Small bug: .col should be ion-col in SCSS :slight_smile:


#7

How about if the buttons are icon-only??


#8

Thank you very much.


#9

@unal1 Did you try just using ion-icon instead of the text ? I assume that would work the same.