Вертикально разделенный контент Popover - PullRequest
Новая
       23

Вертикально разделенный контент Popover

0 голосов
/ 26 июня 2018

Моя цель состоит в том, чтобы у Ionic 3 Popover была «верхняя часть» и «нижняя часть».Я бы хотел, чтобы верхний раздел занял, скажем, верхние 70% PopOver и нижний раздел, скажем, нижние 30% PopOver.Я хотел бы поместить произвольный контент в верхнюю часть и иметь возможность его прокручивать, если он превышает вертикальное пространство, отведенное верхней части.Содержимое нижнего раздела является фиксированным и должно присутствовать всегда, независимо от прокрутки верхнего раздела, и с никогда не должна быть связана полоса прокрутки.

Я предпринял следующую попыткув этом случае, используя stackblitz: https://stackblitz.com/edit/ionic-4k2dbz

Итак, как я могу изменить содержимое компонентов / my-popover / my-popover.html или компонентов / my-popover / my-popover.scss для достижениямакет / поведение, описанное выше?

1 Ответ

0 голосов
/ 26 июня 2018

Если очень быстро, я бы подумал так:

  • Поповеры в Ionic по умолчанию занимают 90% области просмотра на основе документов (максимальная высота - https://ionicframework.com/docs/api/components/popover/PopoverController/)
  • мыможно использовать max-height, чтобы ограничить div верхней панели и установить ее переполнение на auto
  • . Мы можем использовать min-height / max-height, чтобы исправить div нижней панели и установить его переполнение скрытым;
  • теперь, так как вам нужно разделить 30/70, мы должны пропорционально рассчитать его, исходя из максимальной высоты Popover 90% (я использовал 65/25 ниже)

https://stackblitz.com/edit/ionic-x3pkwv

Но тогдаЯ думаю, что при тестировании в ионном приложении на нескольких устройствах, описанных выше, оно может немного испортиться в зависимости от размеров экрана и т. д. Поэтому вы можете рассмотреть возможность использования ионной сетки на основе flexbox. Вот решение ниже:

https://stackblitz.com/edit/ionic-ikvjiw

...