md-radio-group的标签

Question

我在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并从头开始设计它，但它对于重型设备的框架看起来并不十分高效。

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

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