Memberi label dan mengelompokkan tombol radio sejajar secara horizontal

Saya memiliki tombol radio label dan grup (dua) dan saya ingin membuatnya sejajar secara horizontal seperti pada gambar.

masukkan deskripsi gambar di sini

Saya mencoba kode ini:

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

dan juga kode ini:

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

Tapi saya tidak mendapatkan hasil yang saya inginkan.


typescript ionic-framework angular ionic3 ionic2
person zakaria    schedule 28.05.2017    source sumber

Jawaban (1)


arrow_upward
20
arrow_downward

Anda dapat menggunakan elemen ion-row dan ion-col untuk itu. Silakan lihat plunker yang berfungsi ini.

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

Karena kita menggunakan satu baris dan tiga kolom, judul dan item radio akan ditempatkan pada baris yang sama (sejajar secara horizontal).

person sebaferreras    schedule 29.05.2017