Wie richten Sie die Radiobuttons horizontal in eckigem Material aus?

Question

Ich habe eine eingebaute Direktive oder ein Tag dafür erwartet, aber wahrscheinlich nicht entsprechend ihrer Dokumentation.

Dies ist die 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> 

Answer 1

Sie brauchen keine Standard-CSS außer Kraft zu setzen:

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

Setzen Sie einfach in md-radio-group Tag ein layout="row" Attribut.

Answer 2

Besser keine bestehenden Klasse außer Kraft setzen.

Verwenden Sie die Direktive ng-style und geben Sie den Wert für den Anzeigeparameter an.

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