Итак, после двухдневного просмотра документации по Ionic Framework 4 я вижу, что в принципе нет ничего, что могло бы объяснить, как это сделать.
Но, ... на самом деле это не так сложно реализовать.
Получил: https://beta.ionicframework.com/docs/api/nav/. Затем осмотрите элемент примера телефона.Найдите iframe на вкладке элементов инструментов разработчика Chrome (или любой другой используемой вами).Скопируйте этот src и откройте его в новой вкладке браузера.Теперь вы можете увидеть рабочий пример, который не использует фреймворк.Вы можете просто скопировать html src и создать собственный index.html, и он должен работать.
Суть создания ion-nav заключается в следующем:
- Убедитесь, что в теге html есть атрибуты class = "plt-desktop ios" mode = "ios" (иливсе, что вы хотите)
- Убедитесь, что в файле html включены js и css: 'https://unpkg.com/@ionic/core@4.0.0-beta.11/dist/ionic.js' и' https://unpkg.com/@ionic/core@4.0.0-beta.11/css/ionic.bundle.css'
- Убедитесь, что ion-navобернутый внутри тега ion-app.
- add root = "page-one" attr к вашему ion-nav, указывающий, какой веб-компонент вы хотите показать изначально."page-one" - это имя вашего компонента, как определено в window.customElements.define - каким бы оно ни было.
Вы можете использовать компонент ion-nav-push для перемещения на другую страницу.на компонент навигации.Но, скорее всего, вы будете использовать маршрутизатор (React, Page, и т. Д.) Для этого.В вашем конкретном решении для роутера стимулируйте навигацию по страницам, вызывая метод push для элемента ion-nav: что-то вроде:
document.querySelector ('ion-nav'). Push ('page-two')
Подробнее о вызове методов навигации можно прочитать здесь: https://beta.ionicframework.com/docs/api/nav/
Вот пример:
<!DOCTYPE html>
<html dir="ltr" class="plt-desktop ios" mode="ios">
<head>
<meta charset="UTF-8">
<title>Nav</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="https://unpkg.com/@ionic/core@4.0.0-beta.11/dist/ionic.js"></script>
<link rel="stylesheet" type="text/css" href="https://beta.ionicframework.com/docs/overrides.css">
<link rel="stylesheet" href="https://unpkg.com/@ionic/core@4.0.0-beta.11/css/ionic.bundle.css">
<script>
class PageOne extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header translucent>
<ion-toolbar>
<ion-title>Page One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding fullscreen>
<h1>Page One</h1>
<ion-nav-push component="page-two">
<ion-button class="next">Go to Page Two</ion-button>
</ion-nav-push>
</ion-content>
`;
}
}
class PageTwo extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header translucent>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button text="Page One"></ion-back-button>
</ion-buttons>
<ion-title>Page Two</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding fullscreen>
<h1>Page Two</h1>
<div>
<ion-nav-push component="page-three">
<ion-button class="next">Go to Page Three</ion-button>
</ion-nav-push>
</div>
</ion-content>
`;
}
}
class PageThree extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header translucent>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button text="Page Two"></ion-back-button>
</ion-buttons>
<ion-title>Page Three</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding fullscreen>
<h1>Page Three</h1>
</ion-content>
`;
}
}
customElements.define('page-one', PageOne);
customElements.define('page-two', PageTwo);
customElements.define('page-three', PageThree);
</script>
</head>
<body>
<ion-app>
<ion-nav root="page-one"></ion-nav>
</ion-app>
<style>
ion-toolbar {
--background: white;
}
</style>
</body>
</html>