有一种方法可以将单选按钮的标签定位在单选按钮上方 angular material 2？

Question

我正在使用 angular material 2 (material.io)，我正在尝试将 md-radio-button 的标签放在收音机本身的上方，如下所示：

Radio Buttons

文档说您可以轻松地将位置设置在之后或之前。我也在使用 flex-layout (github.com/angular/flex-layout)。

这是我的代码：

<md-radio-group formControlName="id_customer_type" (change)="onChangeCustomerType($event.value)">
  <md-radio-button type="radio" name="id_customer_type" value="1" [checked]="true"> Persona</md-radio-button>
  <md-radio-button type="radio" name="id_customer_type" value="2"> Empresa</md-radio-button>
  <md-radio-button type="radio" name="id_customer_type" value="3"> IoT/M2M</md-radio-button>
</md-radio-group>

如果有人能帮助我，我将不胜感激。谢谢！

Answer 1

如果仔细观察 md-radio-group 创建的元素，您会注意到：

<label class="mat-radio-label" for="md-radio-2-input">
    <div class="mat-radio-container">
        <div class="mat-radio-outer-circle"></div>
        <div class="mat-radio-inner-circle"></div>
        <div class="mat-radio-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLLabelElement]"
             ng-reflect-centered="true" ng-reflect-disabled="false"></div>
    </div>
    <input class="mat-radio-input cdk-visually-hidden" type="radio" id="md-radio-2-input" name="md-radio-group-0">
    <div class="mat-radio-label-content"><span style="display:none">&nbsp;</span>Option 2</div>
</label>

.mat-radio-label 有这个 CSS:

.mat-radio-label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    vertical-align: middle;
}

这基本上是在告诉我们正在使用 Flexbox 对齐其直接子项（单选按钮和标签）。默认的 flex-direction 是 row，因此省略。您可以将其更改为列。通过添加 flex-direction: column-reverse 您将把标签放在上面。

Answer 2

这对我有用

:host /deep/ .mat-radio-label {
  flex-direction: column-reverse;
  .mat-radio-label-content {
    padding: 0;
  }
}

使用"@angular/material": "^6.4.7"

有一种方法可以将单选按钮的标签定位在单选按钮上方 angular material 2？

There is a way to positioning the label of radio-button above of the radio-button itself in angular material 2?

javascript

angular

flexbox

angular-material2

angular-flex-layout