web-dev-qa-db-fra.com

Étiquette et groupe de boutons radio alignés horizontalement

J'ai un bouton radio étiquette et groupe (deux) et je veux le faire pour être aligné horizontalement comme dans l'image.

 enter image description here

J'ai essayé ce code:

`<ion-row radio-group [(ngModel)]="Sexe">
  <ion-col>
      <ion-item>
        <ion-label color="primary">Sexe</ion-label>
        <ion-radio value="Mr"></ion-radio>
        <ion-radio value="Mme"></ion-radio>
      </ion-item>
  </ion-col>
</ion-row>`

et aussi ce code:

`<ion-row radio-group [(ngModel)]="Sexe">
  <ion-col>
      <ion-item>
        <ion-label color="primary">Sexe</ion-label>
      </ion-item>
      <ion-item>
        <ion-radio value="Mr"></ion-radio>
      </ion-item>
      <ion-item>
          <ion-radio value="Mme"></ion-radio>
      </ion-item>
  </ion-col>
</ion-row>`

Mais je n'ai pas le résultat que je veux.

angulartypescriptionic-frameworkionic2ionic3
10
zakaria

Vous pouvez utiliser les éléments ion-row et ion-col pour cela. S'il vous plaît jeter un oeil à ce plunker de travail .

  <ion-row radio-group [(ngModel)]="sexe">
    <ion-col>
      <ion-item>
        Sexe
      </ion-item>
    </ion-col>
    <ion-col>
      <ion-item>
        <ion-label>Homme</ion-label>
        <ion-radio value="homme"></ion-radio>
      </ion-item>
    </ion-col>
    <ion-col>
      <ion-item>
       <ion-label>Femme</ion-label>
        <ion-radio value="femme"></ion-radio>
      </ion-item>
    </ion-col>
  </ion-row>

Puisque nous utilisons une seule ligne et trois colonnes, le titre et les éléments radio seront placés tous dans la même ligne (alignés horizontalement).

15
sebaferreras
<ion-row>
        <ion-label class="ion-label" color=dark>Save</ion-label>
      </ion-row>
      <ion-row radio-group [(ngModel)]="relationship" class="item">

            <ion-col>
                    <ion-radio value="manually" checked></ion-radio>
                    <ion-label>Manually</ion-label>
            </ion-col>

            <ion-col>
                    <ion-radio value="automatic"></ion-radio>
                    <ion-label>Automatically</ion-label>
            </ion-col>

    </ion-row>
0
Sams