Ionic 3 ионных переключателя опции отображения рядом друг с другом, используя flex - PullRequest
Новая
       12

Ionic 3 ионных переключателя опции отображения рядом друг с другом, используя flex

0 голосов
/ 14 мая 2019

Мне нужно расположить переключатели рядом друг с другом: 

<ion-content padding>
    <ion-list radio-group>
        <ion-list-header>
            Auto Manufacturers
        </ion-list-header>
        <ion-item *ngFor="let entry of array">

            <ion-radio (click)="getVal()" slot="start" [value]="entry"></ion-radio>
            <ion-label>&nbsp; {{entry}}</ion-label>
        </ion-item>
    </ion-list>
</ion-content>

Я пытался использовать flex, но это не сработало:

display: flex

Текущее поведение это 2 варианта друг под другом.Но как я могу использовать flex для отображения их рядом друг с другом?

Вот stackblitz

1 Ответ

1 голос
/ 14 мая 2019

Вы также можете использовать систему сетки для достижения этого: 

<ion-content padding>
<ion-list radio-group>
  <ion-list-header>
     Auto Manufacturers
  </ion-list-header>
  <ion-row>
    <ion-col *ngFor="let entry of array">
      <ion-item >
        <ion-radio (click)="getVal()" slot="start" [value]="entry"></ion-radio>
       <ion-label>&nbsp; {{entry}}</ion-label>
      </ion-item>
    </ion-col>
  </ion-row>
</ion-list>
</ion-content>
...