web-dev-qa-db-fra.com

Comment aligner les boutons radio horizontalement dans un matériau angular?

Je m'attendais à une directive intégrée ou à une balise pour cela, mais probablement pas selon leur documentation.

Ceci est le exemple .

<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>
cssangularjsangularjs-material
44
Asqan

Il n'est pas nécessaire de remplacer les CSS par défaut: 

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

enter image description here

Il suffit de mettre dans la balise md-radio-group Un attribut layout="row".

129
Fábio Palmeira

Mieux vaut ne pas remplacer une classe existante.

Utilisez la directive ng-style et donne la valeur du paramètre d'affichage.

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