如何在角形材料中水平对齐单选按钮？

Question

我期待内置指令或标签，但可能不符合他们的文档。

这是example。

<div class="radioButtondemoBasicUsage" ng-app="MyApp">
<form ng-submit="submit()" ng-controller="AppCtrl">
<p>Selected Value: <span class="radioValue">{{ data.group1 }}</span> </p>

<md-radio-group ng-model="data.group1">

  <md-radio-button value="Apple" class="md-primary">Apple</md-radio-button>
  <md-radio-button value="Banana"> Banana </md-radio-button>
  <md-radio-button value="Mango">Mango</md-radio-button>

</md-radio-group>

Answer 1

您无需覆盖任何默认CSS：

<md-radio-group layout="row">
  <md-radio-button value=0 class="md-primary">On</md-radio-button>
  <md-radio-button value=1> Off </md-radio-button>
</md-radio-group>

只需将md-radio-group标记为layout="row"属性。

Answer 2

最好不要覆盖任何现有的类。

使用指令ng-style并为显示参数赋值。

<md-radio-group ng-model="selvalue">
  <md-radio-button value="A" class="md-primary" ng-style="{'display':'inline'}"> Apple</md-radio-button>
  <md-radio-button value="R" class="md-primary" ng-style="{'display':'inline'}"> Orange </md-radio-button>
</md-radio-group>

Answer 3

如果您使用布局行，并且您的广播组位于父级的行布局中，则文本垂直aligin将中断。解决方案是将其放入一个空的包装器元素中。

<div layout="row">
     ...
     <div>
        <md-radio-group ng-model="data.group1" aria-labelledby="favoriteFruit" layout="row">
          <md-radio-button value="Apple" class="md-primary">Apple</md-radio-button>
          <md-radio-button value="Banana">Banana</md-radio-button>
          <md-radio-button value="Mango">Mango</md-radio-button>
        </md-radio-group>
     </div>
     ...
</div>