Button bar with active buttons

ionic-v1
1

Hello!
I have 3 buttons in a button bar - those buttons serve to filter content. I would like to have an active state for those buttons, like it is the case for the tabs. I can’t find this functionality in the docs - does it exist?

Thanks!

2

I ended up writing my own directive for this :smile:

    .directive('activeInButtonBar', function () {
    return {
        link: function (scope, elem) {
            var btns = elem.find('button');

            btns.bind('click', function () {
                angular.forEach(btns, function (oneBtn) {
                    if (oneBtn.classList.contains('active-button')) {
                        oneBtn.classList.remove('active-button');
                    }
                });

                this.classList.add('active-button');
            });
        }
    }
});

Template:

<div class="button-bar" active-in-button-bar>
    <button class="button button-clear" class="active-button" >most popular</button>
    <button class="button button-clear" >newest</button>
    <button class="button button-clear">oldest</button>
</div>
3 Likes