如何在 angular material 中水平对齐单选按钮？

Question

我期待一个内置指令或标签，但根据他们的文档可能不是。

<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

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

使用指令 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 2

您不需要覆盖任何默认值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 3

如果您使用布局行并且您的单选按钮组位于行布局父级中，文本垂直对齐将会中断。解决方案是将它放在一个空的包装器元素中。

<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>

如何在 angular material 中水平对齐单选按钮？

How to align the radio buttons horizontally in angular material?

css

angularjs

angularjs-material