pip-webui/pip-webui-controls/src/toggle_buttons/toggle_buttons.html

HTML5 UI for LOB applications

<div class="pip-toggle-buttons flex layout-row {{class}}" pip-selected="bufButtonIndex" pip-enter-space-press="enterSpacePress($event)"
     ng-if="$mdMedia('gt-xs')">
    <md-button tabindex="-1" ng-repeat="button in buttons"
               ng-class="{'md-accent md-raised selected color-accent-bg' : currentButtonIndex == $index}"
               ng-attr-style="{{ 'background-color:' + (currentButtonIndex == $index ? button.backgroundColor : '') + '!important' }}"
               class="pip-selectable pip-chip-button flex" ng-click="buttonSelected($index, $event)"
               ng-disabled="button.disabled || disabled()">
        {{button.name || button.title | translate}}
        <span ng-if="button.checked || button.complete || button.filled" class="pip-tagged">*</span>
    </md-button>
</div>

<md-input-container class="md-block" ng-if="$mdMedia('xs')">
    <md-select ng-model="currentButtonIndex" ng-disabled="disabled()" aria-label="DROPDOWN" md-on-close="buttonSelected(currentButtonIndex)">
        <md-option ng-repeat="action in buttons" value="{{ ::$index }}">
            {{ (action.title || action.name) | translate }}
            <span ng-if="action.checked || action.complete || action.filled" class="pip-tagged">*</span>
        </md-option>
    </md-select>
</md-input-container>