webentwicklung-frage-antwort-db.com.de

Beschriftet und gruppiert Optionsfelder horizontal ausgerichtet

Ich habe ein Optionsfeld mit Beschriftung und Gruppe (zwei), und ich möchte, dass es horizontal wie im Bild ausgerichtet ist.

 enter image description here

Ich habe diesen Code ausprobiert:

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

und auch diesen 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>`

Aber ich habe nicht das gewünschte Ergebnis.

angulartypescriptionic-frameworkionic2ionic3
10
zakaria

Sie können dafür ion-row- und ion-col-Elemente verwenden. Bitte sehen Sie sich diesen funktionierenden Plunker an.

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

Da wir eine einzige Zeile und drei Spalten verwenden, werden der Titel und die Radioelemente alle in derselben Zeile (horizontal ausgerichtet) platziert.

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