Трафарет: <ion-nav> внутри <ion-pane-split> не работает должным образом - PullRequest
Новая
       43

Трафарет: <ion-nav> внутри <ion-pane-split> не работает должным образом

0 голосов
/ 01 июля 2019

это мой трафарет и ионная версия 

"dependencies": {
    "@ionic/core": "one"
  },
  "devDependencies": {
    "@stencil/core": "1.0.0-beta.8"
  }

Я пытаюсь использовать <ion-menu> внутри <ion-split-pane>, как в ионном приложении, это мой код (это оригинальный репозиторийэтого кода https://github.com/modemlooper/stencil-pwa-sidemenu):

app-root.tsx 

[...]
render() {
    return (
      <ion-app>
        <ion-router useHash={false}>
          <ion-route url="/" component="app-home" />
          <ion-route url="/profile/:name" component="app-profile" />
        </ion-router>

        <ion-split-pane when="lg">
          <ion-menu side="start">
            <ion-header>
              <ion-toolbar color="primary" />
            </ion-header>

            <ion-content forceOverscroll={false}>
              <ion-list>
                <ion-menu-toggle autoHide={false}>
                  <ion-item href="/">
                    <ion-icon slot="start" name="home" />
                    <ion-label>Home</ion-label>
                  </ion-item>
                </ion-menu-toggle>

                <ion-menu-toggle autoHide={false}>
                  <ion-item href="/profile/piero">
                    <ion-icon slot="start" name="person" />
                    <ion-label>Profile</ion-label>
                  </ion-item>
                </ion-menu-toggle>
              </ion-list>
            </ion-content>
          </ion-menu>
          <ion-nav main />
        </ion-split-pane>
      </ion-app>
    );
  }
[...]

Проблема в том, что <ion-nav main /> выдает мне эту ошибку: Ибез "main" разделенная панель не работает должным образом

enter image description here

Это ожидаемое поведение

enter image description here

Как это можно исправить?Я не понимаю, как правильно использовать ионное меню внутри разделенной панели ... Большое вам спасибо

1 Ответ

0 голосов
/ 09 июля 2019

У меня есть разделенная панель, работающая в приложении.В вашей реализации есть пара отличий:

  • ion-nav заключено в элемент ion-content с атрибутом ID
  • Идентификатор ion-content s указан в ion-split-pane[contentId] и ion-menu[contentId]
<ion-split-pane contentId="main-content">
  <ion-menu contentId="main-content">
    ...
  </ion-menu>
  <ion-content id="main-content">
    <ion-nav />
  </ion-content>
</ion-split-pane>
...