группы кнопок в угловом-материала

Question

Могу ли я создать такую ​​же функциональность http://angular-ui.github.io/bootstrap/ (глава: Кнопки (ui.bootstrap.buttons)

с использованием углового материала

радиально-материал имеет директиву радио-кнопки но я не могу использовать его, потому что я не хочу «точку» на левой стороне этикетки.

радиально-материал имеет также выбрать директиву, но это не та же функциональность.

Do I иметь r вариантов?

Answer 1

Да, вы можете получить такую ​​же функциональность.

Plunk: Done here

Сценарий:

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> 

Answer 2

@ Бартоломей Как объяснено в документация ... С V 1.0.5 Grouping with CSS Overrides (прокрутите вниз).

Вы можете просто добавить пользовательские классы, чтобы переопределить тему и достичь того же результата.

@nitin, я проверил свой Plunker и в ней не хватает какой-то CSS, к примеру CSS в примере из документации работ, смотрите ниже, или проверить мой 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; 
}