ปุ่มตัวเลือกป้ายกำกับและกลุ่มจัดวางในแนวนอน

ฉันมีปุ่มตัวเลือกป้ายกำกับและกลุ่ม (สอง) และฉันต้องการทำให้มันอยู่ในแนวนอนเหมือนในภาพ

ป้อนคำอธิบายรูปภาพที่นี่

ฉันลองใช้รหัสนี้:

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

และรหัสนี้ด้วย:

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

แต่ฉันไม่มีผลลัพธ์ที่ฉันต้องการ


typescript ionic-framework angular ionic3 ionic2
person zakaria    schedule 28.05.2017    source แหล่งที่มา

คำตอบ (1)


arrow_upward
20
arrow_downward

คุณสามารถใช้องค์ประกอบ ion-row และ ion-col สำหรับสิ่งนั้นได้ โปรดดูที่ ตัวระเบิดที่ใช้งานได้นี้

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

เนื่องจากเราใช้แถวเดียวและสามคอลัมน์ ชื่อเรื่องและรายการวิทยุจะถูกวางไว้ในแถวเดียวกันทั้งหมด (จัดเรียงตามแนวนอน)

person sebaferreras    schedule 29.05.2017