Es gibt eine Möglichkeit, das Etikett des Radio-Knopfes oberhalb des Radio-Knopfes selbst im eckigen Material 2 zu positionieren?

Question

Ich bin mit Winkelmaterial 2 (material.io) und ich versuche, das Label des md-Radio-Button oberhalb des Radios selbst, so zu setzen:

Radio Buttons

Die Docs sagen Sie kann einfach die Position nach oder vorher einstellen. Ich benutze auch Flex-Layout (github.com/angular/flex-layout).

Hier ist mein Code:

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

Wenn mir jemand helfen kann, werde ich sehr dankbar sein. Vielen Dank!

Answer 1

Wenn Sie die Elemente aussehen näher von md-radio-group erstellt werden Sie dies bemerken:

<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 hat diese CSS:

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

die im Grunde sagt uns, dass sich Flexbox mit seiner auszurichten direkte Kinder (der Radioknopf und das Etikett). Der Standardwert flex-direction ist row, daher entfällt. Sie können es in eine Spalte ändern. Durch Hinzufügen von flex-direction: column-reverse werden Sie das Etikett oben setzen.