Button-bar alternative in ionic?

Ionic Framework ionic-v3
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.

1 Like
2

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

4 Likes
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>

image
ionic.PNG1027×65 1.56 KB

1 Like
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:
image

7 Likes
6

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

2 Likes
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.

11

Thank you for your contribution. Do you have a version that works in Ionic 4?

12

I’ve been using this button bar component for a few years after writing it and recently have put up an example app for the button-bar component on Github at

https://github.com/dorontal/ionic-button-bar

I believe it’s a simple component to use, understand or modify.