Ionic2 два ion-datetime рядом друг с другом

Итак, у меня есть страница, содержащая ионный контент, и он содержит список ионов.

Список ионов содержит элементы ion. Это контейнер для таких элементов, как ввод, метка и т. Д.

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

Чего я хочу

Это код, который позволяет расположить 2 метки рядом друг с другом, как на картинке выше (синие участки).

  <ion-item>
    <ion-label>Label 1</ion-label>
    <ion-label>Label 2</ion-label>
  </ion-item>

Теперь я хочу разместить 2 элемента ion-datetime рядом друг с другом, поэтому я попробовал это.

  <ion-item>
    <ion-datetime></ion-datetime>
    <ion-datetime></ion-datetime>
  </ion-item>

Вот результат.

Результат

В этом примере нет кода для предоставления данных, отображаемых в элементах ion-datetime, но в моем проекте он есть.

Кто-нибудь знает, как я могу заставить это работать?

Ниже приведен пример того, как заставить его работать. Мы решили, что это ошибка, поэтому я сообщил об этом здесь https://github.com/driftyco/ionic/issues/9818.


typescript angular ionic3 ionic2
person Albert Hoekstra    schedule 28.12.2016    source источник
comment
А как насчет css display: inline-block?   -  person Piou    schedule 28.12.2016
comment
У меня есть ответ, который я искал. В любом случае спасибо.   -  person Albert Hoekstra    schedule 28.12.2016

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете использовать элементы ion-row и ion-col для достижения этого макета (или, по крайней мере, чего-то подобного):

  <ion-list>
    <ion-row>
      <ion-col>
        <ion-item>
          <ion-label>Label 1</ion-label>
        </ion-item>
      </ion-col>
      <ion-col>
        <ion-item>
          <ion-label>Label 2</ion-label>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-item>
          <ion-datetime [(ngModel)]="startDate"></ion-datetime>
        </ion-item>
      </ion-col>
      <ion-col>
        <ion-item>
          <ion-datetime [(ngModel)]="endDate"></ion-datetime>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-list>

Хотя я не уверен, что это допустимый вариант в контексте вашего приложения.

person sebaferreras    schedule 28.12.2016
comment
Это работает, но я работаю с датой начала и датой окончания, поэтому ngModel будет привязан к 2 различным свойствам. - person Albert Hoekstra; 28.12.2016
comment
О, это просто для того, чтобы быстрее создать демо :) Я обновил ответ. Основная идея состоит в том, что вы можете создавать сложные макеты, используя ионные элементы row и col. - person sebaferreras; 28.12.2016
comment
Хорошо, это работает! Я просто пробовал это, но без ионного элемента в ионном кольце. - person Albert Hoekstra; 28.12.2016
comment
Он также будет работать без ion-item, он просто добавляет некоторые отступы, границы и некоторые другие вещи, связанные со стилизацией элементов. - person sebaferreras; 28.12.2016
comment
Я только что попробовал, и это не работает. Когда вы нажимаете на левую сторону, вы настраиваете правый редактор даты и времени. Но вы не сможете настроить левый редактор даты и времени. - person Albert Hoekstra; 28.12.2016
comment
Хм, ты прав. Похоже на ошибку ... Итак, ion-item следует использовать для обертывания ion-datetime, чтобы он работал правильно. - person sebaferreras; 28.12.2016