ionic 4 добавление боковое меню

Я начал проект с шаблоном вкладок, который позже решил добавить боковое меню. беда в том, что боковое меню вообще не появляется. вот мой app.components.html выглядит как

<ion-app>
    <ion-split-pane>
        <ion-menu side="start">
            <ion-header translucent>
              <ion-toolbar color="secondary">
                <ion-title>Menu</ion-title>
              </ion-toolbar>
            </ion-header>
            <ion-content><ion-list><ion-item>he vik</ion-item></ion-list></ion-content>
          </ion-menu>
          <ion-router-outlet></ion-router-outlet>

        </ion-split-pane>
</ion-app>

на самом деле после выполнения вышеизложенного моя фактическая страница появляется на короткую секунду и из-за этого показывает белую страницу.

в консоли я вижу ошибку

sz7tok82.entry.js:5 Menu: must have a "content" element to listen for drag events on.

но у меня уже есть элемент содержимого.


ionic-framework ionic4 ion-menu
person Vik    schedule 06.12.2018    source источник

Ответы (2)


arrow_upward
47
arrow_downward

Sirius2013 верен, вам нужно будет использовать атрибут contentId. См. Рабочий пример ниже:

App.component.html

<ion-app>
  <ion-menu contentId="content1" side="start">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      menu stuff
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="content1" main></ion-router-outlet>
</ion-app>


AnyPage.html

На странице, на которой вы хотите отобразить боковое меню, вы можете использовать тег ion-menu-button.
См. этот пример:

<ion-header>
  <ion-toolbar>
    <ion-title>Page Title</ion-title>
    <ion-buttons slot="start">
      <ion-menu-button autoHide="false"></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Установите для тега autoHide значение false, чтобы вы всегда видели кнопку меню.

Документы: https://beta.ionicframework.com/docs/api/menu-button

person Tomas Vancoillie    schedule 07.12.2018
comment
@Tomas Vancoillie Как добавить новое меню помимо существующего? - person Bimal; 30.05.2019
comment
что это значит id = content1 main на роутере-розетке? - person Sherin Green; 18.06.2019
comment
Хорошо, но что означает contentId? Зачем мне это нужно? В документации Ionic просто указано contentId: Описание: идентификатор контента, который должно использовать меню. и я просто сбит с толку, чем раньше - person Cristian Traìna; 26.05.2020
comment
@ CristianTraìna В меню должен быть элемент содержимого для прослушивания событий перетаскивания. <ion-menu contentId="main-content"></ion-menu> <div id="main-content">...</div> - person Tomas Vancoillie; 26.05.2020
comment
@TomasVancoillie, не могли бы вы ответить на мой вопрос ? Я назначу награду за нее, когда она будет доступна - person Cristian Traìna; 27.05.2020

arrow_upward
5
arrow_downward 

<ion-menu>
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>

https://beta.ionicframework.com/docs/api/menu

Попробуйте использовать атрибут contentId.

person sirius2013    schedule 06.12.2018