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

Posted 2023-02-19

【中文标题】如何在角度材料中水平对齐单选按钮？

【英文标题】：How to align the radio buttons horizontally in angular material?

【发布时间】：2015-09-15 20:59:30

【问题描述】：

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

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

【参考方案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" 属性即可。

【参考方案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>

【讨论】：

完美适用于 Angular 5（Material 2 v5.0）。

为了让它看起来更准确添加md-radio-group[layout="row"] md-radio-button margin: 10px;

【参考方案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>