Компонент Ionic4 - Меню: должен иметь элемент «контент» для прослушивания событий перетаскивания на - PullRequest
Новая
       21

Компонент Ionic4 - Меню: должен иметь элемент «контент» для прослушивания событий перетаскивания на

0 голосов
/ 26 октября 2018

У меня есть следующий код: 

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ionic 4 - Menu</title>
<link rel="stylesheet" href="https://unpkg.com/@ionic/core@4.0.0-beta.13/css/ionic.bundle.css" />
<script src="https://unpkg.com/@ionic/core@4.0.0-beta.13/dist/ionic.js"></script>
<script>
window.addEventListener('load', event => {
    document.querySelector('.button_details').addEventListener('click', (event) => {
        document.querySelector('.menu_main').toggle();
    });
});
</script>
</head>
<body>

    <ion-menu class="menu_main" side="start">
        <ion-header>
            <ion-toolbar color="secondary">
                <ion-title>Left Menu</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content padding>
            Hello World!
        </ion-content>
    </ion-menu>
    <ion-menu-controller></ion-menu-controller>

    <ion-card style="display:inline-block;width:300px">
        <ion-card-header>
            <ion-card-title>Hello World</ion-card-title>
        </ion-card-header>
        <div style="padding:10px 10px;text-align:right;">
            <ion-button color="primary" class="button_details">Details</ion-button>
        </div>
    </ion-card>

</body>

</html>

Работает нормально, с одним исключением: при загрузке страницы на консоли возникает следующая ошибка: 

Error: "Menu: must have a 'content' element to listen for drag events on."

Здесь у вас есть CodePen.io:

https://codepen.io/anon/pen/qJgEzZ/?editors=1011

А ниже вы можете попробовать код прямо здесь на StackOverflow: 

window.addEventListener('load', event => {
	document.querySelector('.button_details').addEventListener('click', (event) => {
		document.querySelector('.menu_main').toggle();
	});
});
<script src="https://unpkg.com/@ionic/core@4.0.0-beta.13/dist/ionic.js"></script>
<link href="https://unpkg.com/@ionic/core@4.0.0-beta.13/css/ionic.bundle.css" rel="stylesheet"/>
	<ion-menu class="menu_main" side="start">
		<ion-header>
			<ion-toolbar color="secondary">
				<ion-title>Left Menu</ion-title>
			</ion-toolbar>
		</ion-header>
		<ion-content padding>
			Hello World!
		</ion-content>
	</ion-menu>
	<ion-menu-controller></ion-menu-controller>

	<ion-card style="display:inline-block;width:300px">
		<ion-card-header>
			<ion-card-title>Hello World</ion-card-title>
		</ion-card-header>
		<div style="padding:10px 10px;text-align:right;">
			<ion-button color="primary" class="button_details">Details</ion-button>
		</div>
	</ion-card>

Есть идеи, как решить эту проблему? Чего здесь не хватает?

Не могли бы вы раскошелиться на мой CodePen.io с правильным кодом?

Спасибо!

Ответы [ 2 ]

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

если вы хотите код: использовать content-id="content" и на содержание ионов id="content"

<ion-menu class="menu_main" side="start" content-id="content">
        <ion-header>
            <ion-toolbar color="secondary">
                <ion-title>Left Menu</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content padding>
            Hello World!
        </ion-content>
    </ion-menu>
    <ion-menu-controller></ion-menu-controller>

    <ion-content id="content">
     <ion-card style="display:inline-block;width:300px">
        <ion-card-header>
            <ion-card-title>Hello World</ion-card-title>
        </ion-card-header>
        <div style="padding:10px 10px;text-align:right;">
            <ion-button color="primary" class="button_details">Details</ion-button>
        </div>
    </ion-card>
</ion-content>
0 голосов
/ 29 октября 2018

Если вам не нужен жест смахивания для открытия меню, вы можете добавить атрибут swipe-gesture="false" к тегу ion-menu.ИМО это должно избавиться от ошибки, но не в данный момент.Я создал проблему на GitHub .https://codepen.io/anon/pen/mzgRBj?editors=1011

Если вы хотите, чтобы жест смахивания работал, вы должны ссылаться на идентификатор элемента содержимого в элементе ion-menu, используя атрибут content-id, см. https://codepen.io/anon/pen/BqEpxE?editors=1011

...