md-radio-group 的标签答案

【问题标题】：Lablel for md-radio-groupmd-radio-group 的标签
【发布时间】：2018-03-17 07:01:18
【问题描述】：

我在 Angular 4 Material 应用中有一组单选按钮：

<md-radio-group fxLayout fxLayoutAlign="center center" fxLayoutGap="30px">
    <md-radio-button value="1">Date</md-radio-button>
    <md-radio-button value="2">Status</md-radio-button>
    <md-radio-button value="3">From</md-radio-button>
    <md-radio-button value="4">To</md-radio-button>
</md-radio-group>

我浏览了文档和示例，但无法弄清楚如何为该组指定标签。我需要这样的东西，但有适当的样式：

Angular Material 中将标签添加到单选组的预期方式是什么？

显然，我们可以添加 label 并从头开始设置样式，但对于样式繁重的组件的框架来说，它的效率似乎并不高。

【问题讨论】：

您能创建一个 Codepen 或类似的东西，以便我们查看并尝试吗？
我愿意，但似乎这对于任何 Angular Material 应用程序来说都是非常基本的事情。

标签： html css angular material-design angular-material2

【解决方案1】：

这就是你要找的。

<div fxLayout fxLayoutAlign="center center" fxLayoutGap="30px">
      <label>Sort by</label>  
      <md-radio-group>
        <md-radio-button value="1">Date</md-radio-button>
        <md-radio-button value="2">Status</md-radio-button>
        <md-radio-button value="3">From</md-radio-button>
        <md-radio-button value="4">To</md-radio-button>
      </md-radio-group>
  </div>

css

.mat-radio-button {margin-right: 30px;}

否则将 flexLayout 添加到您的 md-radio-group

<md-radio-group fxLayout fxLayoutAlign="center center" fxLayoutGap="30px">

【讨论】：

添加label 肯定是一种选择，但是它的样式呢？它需要完全从头开始吗？ Angular Material 中没有内置的方法吗？
@AlexanderAbakumov，是的，现在你必须设置它的样式。他们就是这样做的。甚至 input 或 selects 在组件之外都没有标签。

【解决方案2】：

来自https://codepen.io/jakobadam/pen/xqZoBR

<!--
  `md-input-has-value` elevates `label`
  `md-input-invalid` shows error message
-->
<md-input-container class="md-input-has-value" 
                    ng-class="{ 'md-input-invalid' : form.fruit.$invalid && form.$submitted }">
  <label class="md-required" translate>Fruit</label>

  <md-radio-group md-autofocus name="fruit" ng-model="fruit" layout="row" required>
    <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 ng-messages="form.fruit.$error">
    <div ng-message="required" translate>Yo. Select some fruit.</div>
  </div>
</md-input-container>

【讨论】：

【解决方案3】：

我这样做的方法是添加一个带有一些右边距的跨度，这样就可以了

<md-radio-group ng-model="fruit" layout="row">
    <span style="margin-right:3%;">Fruit Name : </span>
    <md-radio-button value="Apple" class="md-primary">Apple</md-radio-button>
    <md-radio-button value="Banana">Banana</md-radio-button>
</md-radio-group>

【讨论】：