Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Groups of buttons in angular-material

Can I create the same functionality http://angular-ui.github.io/bootstrap/ (chapter: Buttons (ui.bootstrap.buttons)

using angular-material?

Angular-material has radio-button directive but I can’t use it because I don’t want “the dot” on the left side of the label.

Angular-material has also select directive but it is not the same functionality.

Do I have another options?

like image 287
Bartłomiej Avatar asked Apr 17 '15 16:04

Bartłomiej


People also ask

How do you use the toggle group mat button?

By default, mat-button-toggle-group acts like a radio-button group- only one item can be selected. In this mode, the value of the mat-button-toggle-group will reflect the value of the selected button and ngModel is supported. Adding the multiple attribute allows multiple items to be selected (checkbox behavior).

What is the number of button directives provided in angular material?

Types of Angular Material Buttons MatButtonModule comes up with seven different types of buttons. Depending upon the importance of actions.

What are toggle buttons?

A toggle button allows the user to change a setting between two states. You can add a basic toggle button to your layout with the ToggleButton object. Android 4.0 (API level 14) introduces another kind of toggle button called a switch that provides a slider control, which you can add with a Switch object.

What is button in angular?

Angular Material buttons are native <button> or <a> elements enhanced with Material Design styling and ink ripples.


2 Answers

@Bartłomiej As explained in the documentation... As of V 1.0.5 Grouping with CSS Overrides (scroll all the way down).

You can just add custom classes to override the theme and achieve the same result.

@nitin, I checked your Plunker and it was missing some CSS, for example the css in the example from the documentation works, see below, or check my forked Plunker:

.md-button.left {
    border-radius: 10px 0 0 10px;
}
.md-button.middle {
    border-radius: 0;
    border-left: 1px solid rgba(230, 230, 230, 0.96);
    border-right: 1px solid rgba(230, 230, 230, 0.96);
}
.md-button.right {
    border-radius: 0 10px 10px 0;
}
.md-button:not([disabled]):hover {
    background-color: rgba(193, 193, 193, 0.96);
    color: rgba(44, 65, 164, 0.96);
    transition: 0.3s;
}
like image 101
Aaron C Avatar answered Oct 16 '22 17:10

Aaron C


Yes you can get the same functionality.

Plunk : Done here

Script :

 var app=angular.module('myApp',['ngMaterial'])
   .config(function($mdThemingProvider) {
     $mdThemingProvider.theme('primary')
    .primaryPalette('blue')
    .accentPalette('orange');
    })
    .controller('ctrl',function($scope){
        $scope.buttons={
          left:false,
          middle:false,
          right:false
         };
        var keys=Object.keys($scope.buttons);
        $scope.radioModel='middle';

        $scope.save=function(id){
            $scope.radioModel=keys[id];
        };

  });

HTML

 <section layout="row">
     <md-input-container>
       <input type="text" ng-model="radioModel"></input>
     </md-input-container>
 </section>
 <section layout="row">
  <md-button ng-click="save('0')" class="md-raised md-primary">left</md-button>
  <md-button ng-click="save('1')" class="md-raised md-primary">middle</md-button>
  <md-button ng-click="save('2')" class="md-raised md-primary">right</md-button> 
 </section>

like image 45
nitin Avatar answered Oct 16 '22 15:10

nitin