Button Bar in Ionic 2

Ionic Framework ionic-v3
1

I’m relatively new to Ionic 2, but I’ve scoured the documentation and can’t find anything on button bars. The closest thing I’ve found is an ion-segment, but I’m looking for a real button-bar. Are these still supported in Ionic 2? Thanks.

2

Can you achieve what you’re looking for with a grid?

3

I’ve tried that, but I’m unable to get the buttons flesh. I would also have to get them to toggle like radio buttons. Does Ionic 2 not have support for this?

4

I guess I don’t understand how SegmentButtons don’t do what you’re looking for.

1 Like
5

Sorry, I should have clarified. Functionally, segment buttons work for me, but they seem to be somewhat limited stylistically (I need them to look and feel like regular buttons, just flesh together and operating as a group). I was hoping there was something like the Bootstrap button-group built in to Ionic 2.

6

Hi @asrinivasan,

ion-segment should have the same functionality as the examples shown in:

Button Bar (which is what I assume your original question is referencing as well)

You just need to extend the styling in CSS.

HTML

`<ion-segment [(ngModel)]="robots">
        <ion-segment-button value="bender" class="green">
            Futurama
        </ion-segment-button>
        <ion-segment-button value="walle">
            Pixar
        </ion-segment-button>
    </ion-segment>`

SCSS

`.green {
    border-color: #28A54C;
    background-color: #33CD5F;
}`
7

@asrinivasan check my answer to solve this in this link: https://forum.ionicframework.com/t/button-bar-alternative-in-ionic-2/55443/5?u=rodolfosilva

8

Thanks, segment work nice!