Открыть левую навигацию на странице с раздельным просмотром как на главной странице в мобильном портретном режиме.

Я работаю на странице Onsen UI Split View. Все отлично работает в «Ландшафтном режиме». Я хочу, чтобы когда страница ons-split-view открыта на мобильном устройстве «Портретный режим», тогда левая навигация работает как главная страница, и когда мы нажимаем любую ссылку, открывается другая страница с кнопкой «Назад» вверху для возврата на левую страницу навигации.


mobile split landscape-portrait onsen-ui
person cameron    schedule 14.04.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

На самом деле то, что вы хотите сделать, это не то, для чего предназначено разделенное представление.

Вероятно, проще всего заглянуть в ons-sliding-menu. В Onsen 2 эти два компонента были объединены в новый, названный ons-splitter. Функциональность может быть не совсем такой, какой вы хотите, но она похожа и, вероятно, проста в использовании.

Другой вариант может потребовать больше усилий. Самое простое, что вы можете сделать, это просто написать CSS, который делает то, что вы хотите:

@media screen and (orientation:portrait) {
  .onsen-split-view__secondary {
    opacity: 1 !important;
    display: block !important;
    z-index: 2;
    width: 100% !important;
    transition: 0.2s transform ease-in;
  }
  .onsen-split-view__secondary.closed {
    transform: translate(-100%, 0);
  }
}

А также вы можете добавить кнопку «Назад» на свои главные страницы и сделать ее видимой только в книжной ориентации. Что вы хотите, так это то, что когда вы щелкаете пункт меню, он добавляет класс closed из элемента, а когда вы нажимаете кнопку «Назад», он удаляет его.

Если вы хотите, вы также можете подумать о переходе в Онсэн 2, где ons-splitter уже делает такие вещи из коробки.

person Ilia Yatchev    schedule 14.04.2016