У меня есть метка и радио-кнопка группы (две), и я хочу, чтобы она была выровнена по горизонтали, как на картинке.

enter image description here

Я попробовал этот код:

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

Но у меня нет результата, которого я хочу.

11
zakaria 28 Май 2017 в 16:28

2 ответа

Лучший ответ

Для этого вы можете использовать элементы 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>

Поскольку мы используем одну строку и три столбца, заголовок и элементы радио будут размещены в одной строке (выровнены по горизонтали).

19
sebaferreras 29 Май 2017 в 06:09
<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>
1
Sams 16 Окт 2018 в 10:56