refactor(page): removes ion-page wc

This commit is contained in:
Manu Mtz.-Almeida
2018-02-28 15:05:20 +01:00
parent c3362fecd5
commit eb7cbe9f04
121 changed files with 330 additions and 465 deletions

View File

@ -7,17 +7,15 @@ export class PageOne {
render() { render() {
return [ return [
<ion-page> <ion-header>
<ion-header> <ion-toolbar>
<ion-toolbar> <ion-title>Page One</ion-title>
<ion-title>Page One</ion-title> </ion-toolbar>
</ion-toolbar> </ion-header>,
</ion-header> <ion-content>
<ion-content> page one
page one <a href='#/two/second-page'>Ir a la page 2</a>
<a href='#/two/second-page'>Ir a la page 2</a> </ion-content>
</ion-content>
</ion-page>
]; ];
} }
} }

View File

@ -7,16 +7,14 @@ export class PageTwo {
render() { render() {
return [ return [
<ion-page> <ion-header>
<ion-header> <ion-toolbar>
<ion-toolbar> <ion-title>Page Two</ion-title>
<ion-title>Page Two</ion-title> </ion-toolbar>
</ion-toolbar> </ion-header>,
</ion-header> <ion-content>
<ion-content> this is page two
this is page two </ion-content>
</ion-content>
</ion-page>
]; ];
} }
} }

View File

@ -7,16 +7,14 @@ export class TabOne {
render() { render() {
return [ return [
<ion-page> <ion-header>
<ion-header> <ion-toolbar>
<ion-toolbar> <ion-title>Page One</ion-title>
<ion-title>Page One</ion-title> </ion-toolbar>
</ion-toolbar> </ion-header>,
</ion-header> <ion-content>
<ion-content> tab one
tab one </ion-content>
</ion-content>
</ion-page>
]; ];
} }
} }

View File

@ -7,16 +7,14 @@ export class TabThree {
render() { render() {
return [ return [
<ion-page> <ion-header>
<ion-header> <ion-toolbar>
<ion-toolbar> <ion-title>Tab 3</ion-title>
<ion-title>Tab 3</ion-title> </ion-toolbar>
</ion-toolbar> </ion-header>,
</ion-header> <ion-content>
<ion-content> tab three
tab three </ion-content>
</ion-content>
</ion-page>
]; ];
} }
} }

View File

@ -7,16 +7,14 @@ export class TabTwo {
render() { render() {
return [ return [
<ion-page> <ion-header>
<ion-header> <ion-toolbar>
<ion-toolbar> <ion-title>Tab two (2)</ion-title>
<ion-title>Tab two (2)</ion-title> </ion-toolbar>
</ion-toolbar> </ion-header>,
</ion-header> <ion-content>
<ion-content> <ion-nav></ion-nav>
<ion-nav></ion-nav> </ion-content>
</ion-content>
</ion-page>
]; ];
} }
} }

View File

@ -2081,36 +2081,6 @@ declare global {
} }
import {
Page as IonPage
} from './components/page/page';
declare global {
interface HTMLIonPageElement extends IonPage, HTMLStencilElement {
}
var HTMLIonPageElement: {
prototype: HTMLIonPageElement;
new (): HTMLIonPageElement;
};
interface HTMLElementTagNameMap {
"ion-page": HTMLIonPageElement;
}
interface ElementTagNameMap {
"ion-page": HTMLIonPageElement;
}
namespace JSX {
interface IntrinsicElements {
"ion-page": JSXElements.IonPageAttributes;
}
}
namespace JSXElements {
export interface IonPageAttributes extends HTMLAttributes {
}
}
}
import { import {
PickerColumnCmp as IonPickerColumn PickerColumnCmp as IonPickerColumn
} from './components/picker-column/picker-column'; } from './components/picker-column/picker-column';

View File

@ -10,28 +10,27 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Action Sheet - Basic</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding> <ion-header>
<ion-action-sheet-controller></ion-action-sheet-controller> <ion-toolbar>
<ion-title>Action Sheet - Basic</ion-title>
</ion-toolbar>
</ion-header>
<ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button> <ion-content padding>
<ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button> <ion-action-sheet-controller></ion-action-sheet-controller>
<ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</ion-button>
<ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
<ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
<ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
<ion-button expand="block" id="icons" onclick="presentIcons()">Icons</ion-button>
<ion-button expand="block" id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</ion-button>
</ion-content> <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
<ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
<ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</ion-button>
<ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
<ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
<ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
<ion-button expand="block" id="icons" onclick="presentIcons()">Icons</ion-button>
<ion-button expand="block" id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</ion-button>
</ion-content>
</ion-page>
</ion-app> </ion-app>
<script> <script>

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Action Sheet - Translucent</ion-title> <ion-title>Action Sheet - Translucent</ion-title>
@ -41,7 +41,7 @@
</ion-row> </ion-row>
</ion-grid> </ion-grid>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<script> <script>

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Alert - Basic</ion-title> <ion-title>Alert - Basic</ion-title>
@ -30,7 +30,7 @@
<ion-button id="checkbox" expand="block" onclick="presentAlertCheckbox()">Checkbox</ion-button> <ion-button id="checkbox" expand="block" onclick="presentAlertCheckbox()">Checkbox</ion-button>
<ion-button expand="block" onclick="presentWithCssClass()">CssClass</ion-button> <ion-button expand="block" onclick="presentWithCssClass()">CssClass</ion-button>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<script> <script>

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Alert - Translucent</ion-title> <ion-title>Alert - Translucent</ion-title>
@ -44,7 +44,7 @@
<ion-button expand="block" color="secondary" onclick="presentAlertRadio()">Radio</ion-button> <ion-button expand="block" color="secondary" onclick="presentAlertRadio()">Radio</ion-button>
<ion-button expand="block" color="danger" onclick="presentAlertCheckbox()">Checkbox</ion-button> <ion-button expand="block" color="danger" onclick="presentAlertCheckbox()">Checkbox</ion-button>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<script> <script>

View File

@ -150,23 +150,10 @@ sub {
bottom: -.25em; bottom: -.25em;
} }
ion-app {
@include position(0);
position: absolute;
z-index: $z-index-page-container;
width: 100%;
height: 100%;
contain: layout size style;
}
// Page Container Structure // Page Container Structure
// -------------------------------------------------- // --------------------------------------------------
ion-app,
.ion-page { .ion-page {
@include position(0); @include position(0);

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Avatar - Basic</ion-title> <ion-title>Avatar - Basic</ion-title>
@ -36,7 +36,7 @@
<ion-label>Item Avatar</ion-label> <ion-label>Item Avatar</ion-label>
</ion-item> </ion-item>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
</body> </body>

View File

@ -4,15 +4,13 @@ A back button is a component that allows you navigate back into app history. To
add a back button to your view, all you need is: add a back button to your view, all you need is:
```html ```html
<ion-page> <ion-header>
<ion-header> <ion-toolbar>
<ion-toolbar> <ion-buttons slot="start">
<ion-buttons slot="start"> <ion-back-button></ion-back-button>
<ion-back-button></ion-back-button> </ion-buttons>
</ion-buttons> </ion-toolbar>
</ion-toolbar> </ion-header>
</ion-header>
</ion-page>
``` ```
The back button component is smart enough to know what to render and what content to show. The back button component is smart enough to know what to render and what content to show.
@ -20,39 +18,35 @@ The back button component is smart enough to know what to render and what conten
If, however, you want more control over what is shown in the back button, you can pass your own button markup. If, however, you want more control over what is shown in the back button, you can pass your own button markup.
```html ```html
<ion-page> <ion-header>
<ion-header> <ion-toolbar>
<ion-toolbar> <ion-buttons slot="start">
<ion-buttons slot="start"> <ion-back-button>
<ion-back-button> <ion-button>
<ion-button> Button Text
Button Text <ion-icon name="add" slot="start"></ion-icon>
<ion-icon name="add" slot="start"></ion-icon> </ion-button>
</ion-button> </ion-back-button>
</ion-back-button> </ion-buttons>
</ion-buttons> </ion-toolbar>
</ion-toolbar> </ion-header>
</ion-header>
</ion-page>
``` ```
Or no button text at all: Or no button text at all:
```html ```html
<ion-page> <ion-header>
<ion-header> <ion-toolbar>
<ion-toolbar> <ion-buttons slot="start">
<ion-buttons slot="start"> <ion-back-button>
<ion-back-button> <ion-button>
<ion-button> <ion-icon name="add" slot="icon-only"></ion-icon>
<ion-icon name="add" slot="icon-only"></ion-icon> </ion-button>
</ion-button> </ion-back-button>
</ion-back-button> </ion-buttons>
</ion-buttons> </ion-toolbar>
</ion-toolbar> </ion-header>
</ion-header>
</ion-page>
``` ```

View File

@ -17,7 +17,7 @@
async function loadFirstPage() { async function loadFirstPage() {
const nav = document.querySelector('ion-nav'); const nav = document.querySelector('ion-nav');
await nav.componentOnReady(); await nav.componentOnReady();
const firstPage = document.createElement('ion-page'); const firstPage = document.createElement('div');
firstPage.classList.add('first-page'); firstPage.classList.add('first-page');
firstPage.innerHTML = ` firstPage.innerHTML = `
<ion-header> <ion-header>
@ -44,7 +44,7 @@
} }
async function goToPageTwo(nav) { async function goToPageTwo(nav) {
const secondPage = document.createElement('ion-page'); const firstPage = document.createElement('div');
secondPage.classList.add('second-page'); secondPage.classList.add('second-page');
secondPage.innerHTML = ` secondPage.innerHTML = `
<ion-header> <ion-header>
@ -72,7 +72,7 @@
} }
async function goToPageThree(nav) { async function goToPageThree(nav) {
const thirdPage = document.createElement('ion-page'); const thirdPage = document.createElement('div');
thirdPage.classList.add('third-page'); thirdPage.classList.add('third-page');
thirdPage.innerHTML = ` thirdPage.innerHTML = `
<ion-header> <ion-header>

View File

@ -9,7 +9,7 @@
class PageOne extends HTMLElement { class PageOne extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -24,7 +24,6 @@
<ion-button class="next">Go to Page Two</ion-button> <ion-button class="next">Go to Page Two</ion-button>
</ion-nav-push> </ion-nav-push>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }
@ -32,7 +31,7 @@
class PageTwo extends HTMLElement { class PageTwo extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -49,7 +48,6 @@
</ion-nav-push> </ion-nav-push>
</div> </div>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }
@ -57,7 +55,7 @@
class PageThree extends HTMLElement { class PageThree extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -74,7 +72,6 @@
</ion-nav-push> </ion-nav-push>
</div> </div>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }
@ -82,7 +79,7 @@
class PageFour extends HTMLElement { class PageFour extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -94,7 +91,6 @@
<ion-content padding> <ion-content padding>
<h1>Page Four</h1> <h1>Page Four</h1>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Badge - Basic</ion-title> <ion-title>Badge - Basic</ion-title>
@ -111,7 +111,7 @@
</ion-list> </ion-list>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<script> <script>

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Button - Anchor</ion-title> <ion-title>Button - Anchor</ion-title>
@ -61,7 +61,7 @@
<ion-button href="#" color="secondary" disabled>Secondary Disabled</ion-button> <ion-button href="#" color="secondary" disabled>Secondary Disabled</ion-button>
</p> </p>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
</body> </body>
</html> </html>

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Button - Basic</ion-title> <ion-title>Button - Basic</ion-title>
@ -77,7 +77,7 @@
</p> </p>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<script> <script>

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Button - Expand</ion-title> <ion-title>Button - Expand</ion-title>
@ -41,7 +41,7 @@
<ion-button expand="full" round>Full + Round</ion-button> <ion-button expand="full" round>Full + Round</ion-button>
</p> </p>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
</body> </body>
</html> </html>

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Button - Fill</ion-title> <ion-title>Button - Fill</ion-title>
@ -124,7 +124,7 @@
<ion-button fill="clear" color="secondary" disabled>Secondary Disabled</ion-button> <ion-button fill="clear" color="secondary" disabled>Secondary Disabled</ion-button>
</p> </p>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
</body> </body>
</html> </html>

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Button - Icon</ion-title> <ion-title>Button - Icon</ion-title>
@ -119,7 +119,7 @@
</ion-button> </ion-button>
</p> </p>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
</body> </body>
</html> </html>

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Button - Round</ion-title> <ion-title>Button - Round</ion-title>
@ -43,7 +43,7 @@
<ion-button round expand="full" color="dark">Full</ion-button> <ion-button round expand="full" color="dark">Full</ion-button>
<ion-button round strong>Strong</ion-button> <ion-button round strong>Strong</ion-button>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<style> <style>

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Button - Size</ion-title> <ion-title>Button - Size</ion-title>
@ -51,7 +51,7 @@
<ion-button size="large" fill="clear" href="#">Large</ion-button> <ion-button size="large" fill="clear" href="#">Large</ion-button>
</p> </p>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
</body> </body>
</html> </html>

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Button - Strong</ion-title> <ion-title>Button - Strong</ion-title>
@ -23,7 +23,7 @@
<p><ion-button strong expand="full" color="dark">Full</ion-button></p> <p><ion-button strong expand="full" color="dark">Full</ion-button></p>
<p><ion-button strong round>Strong</ion-button></p> <p><ion-button strong round>Strong</ion-button></p>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
</body> </body>
</html> </html>

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Button - Toolbar</ion-title> <ion-title>Button - Toolbar</ion-title>
@ -250,7 +250,7 @@
</ion-segment> </ion-segment>
</ion-toolbar> </ion-toolbar>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
</body> </body>
</html> </html>

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Button - Basic</ion-title> <ion-title>Button - Basic</ion-title>
@ -25,7 +25,7 @@
<ion-content padding no-bounce text-center> <ion-content padding no-bounce text-center>
Content Content
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
</body> </body>
</html> </html>

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Card - Basic</ion-title> <ion-title>Card - Basic</ion-title>
@ -64,7 +64,7 @@
</ion-item> </ion-item>
</ion-card> </ion-card>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<style> <style>
.content { .content {

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Card - Basic</ion-title> <ion-title>Card - Basic</ion-title>
@ -238,7 +238,7 @@
</ion-card> </ion-card>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
</body> </body>

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Checkbox - Basic</ion-title> <ion-title>Checkbox - Basic</ion-title>
@ -76,7 +76,7 @@
<ion-checkbox disabled></ion-checkbox> <ion-checkbox disabled></ion-checkbox>
</ion-item> </ion-item>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
</body> </body>
</html> </html>

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Chip - Basic</ion-title> <ion-title>Chip - Basic</ion-title>
@ -119,7 +119,6 @@
</ion-chip> </ion-chip>
</ion-item> </ion-item>
</ion-content> </ion-content>
</ion-page>
<script> <script>
function del(chip) { function del(chip) {

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header id="header"> <ion-header id="header">
<ion-toolbar style="display: none" id="toolbar2"> <ion-toolbar style="display: none" id="toolbar2">
<ion-title>Hidden Toolbar</ion-title> <ion-title>Hidden Toolbar</ion-title>
@ -67,7 +67,6 @@
<ion-title>Footer</ion-title> <ion-title>Footer</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-footer> </ion-footer>
</ion-page>
<script> <script>
function toggleFullscreen() { function toggleFullscreen() {

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Datetime - Basic</ion-title> <ion-title>Datetime - Basic</ion-title>
@ -121,7 +121,6 @@
</ion-list> </ion-list>
</ion-content> </ion-content>
</ion-page>
<script> <script>
var yearValuesArray = [2020, 2016, 2008, 2004, 2000, 1996]; var yearValuesArray = [2020, 2016, 2008, 2004, 2000, 1996];

View File

@ -11,7 +11,7 @@
<body onload="runTest()"> <body onload="runTest()">
<ion-events></ion-events> <ion-events></ion-events>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Events</ion-title> <ion-title>Events</ion-title>
@ -31,7 +31,7 @@
<ion-button class="publish">Publish the data</ion-button> <ion-button class="publish">Publish the data</ion-button>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<script> <script>

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Floating Action Button - Basic</ion-title> <ion-title>Floating Action Button - Basic</ion-title>
@ -92,7 +92,6 @@
<ion-title>Footer</ion-title> <ion-title>Footer</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-footer> </ion-footer>
</ion-page>
<script> <script>
function insertAfter(el, referenceNode) { function insertAfter(el, referenceNode) {

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Floating Action Button - Translucent</ion-title> <ion-title>Floating Action Button - Translucent</ion-title>
@ -98,7 +98,6 @@
<ion-title>Footer</ion-title> <ion-title>Footer</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-footer> </ion-footer>
</ion-page>
<script> <script>
function insertAfter(el, referenceNode) { function insertAfter(el, referenceNode) {

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Grid - Basic</ion-title> <ion-title>Grid - Basic</ion-title>
@ -265,7 +265,6 @@
</ion-grid> </ion-grid>
</ion-content> </ion-content>
</ion-page>
<style> <style>
.grid-demo ion-col div { .grid-demo ion-col div {

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Hide when - Basic</ion-title> <ion-title>Hide when - Basic</ion-title>
@ -94,7 +94,7 @@
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<script> <script>

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Icon - Basic</ion-title> <ion-title>Icon - Basic</ion-title>
@ -179,7 +179,7 @@
font-size: 0.8em; font-size: 0.8em;
} }
</style> </style>
</ion-page>
</ion-app> </ion-app>
<script> <script>

View File

@ -16,7 +16,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Icon - Items</ion-title> <ion-title>Icon - Items</ion-title>
@ -166,7 +166,7 @@
</script> </script>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
</body> </body>

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
@ -36,7 +36,7 @@
</ion-infinite-scroll> </ion-infinite-scroll>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Input - Attributes</ion-title> <ion-title>Input - Attributes</ion-title>
@ -78,7 +78,6 @@
</ion-list> </ion-list>
</ion-content> </ion-content>
</ion-page>
<script> <script>
var numberInput = checkInput('input1'); var numberInput = checkInput('input1');

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Input - Basic</ion-title> <ion-title>Input - Basic</ion-title>
@ -93,7 +93,6 @@
</ion-item> </ion-item>
</ion-content> </ion-content>
</ion-page>
<script> <script>
function toggleBoolean(id, prop) { function toggleBoolean(id, prop) {

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Item Sliding - Basic</ion-title> <ion-title>Item Sliding - Basic</ion-title>
@ -422,7 +422,7 @@
} }
</style> </style>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
</body> </body>
</html> </html>

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Item - Basic</ion-title> <ion-title>Item - Basic</ion-title>
@ -109,7 +109,7 @@
<ion-title>Footer</ion-title> <ion-title>Footer</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-footer> </ion-footer>
</ion-page>
</ion-app> </ion-app>
</body> </body>

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Items as Links/Buttons</ion-title> <ion-title>Items as Links/Buttons</ion-title>
@ -132,7 +132,7 @@
</ion-item> </ion-item>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<script> <script>

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Item Colors</ion-title> <ion-title>Item Colors</ion-title>
@ -109,7 +109,7 @@
</ion-item> </ion-item>
</ion-list> </ion-list>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<script> <script>

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Item Divider</ion-title> <ion-title>Item Divider</ion-title>
@ -145,7 +145,7 @@
height: 100px; height: 100px;
} }
</style> </style>
</ion-page>
</ion-app> </ion-app>
</body> </body>

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Item Groups</ion-title> <ion-title>Item Groups</ion-title>
@ -27,7 +27,7 @@
<!-- list loaded from data --> <!-- list loaded from data -->
</ion-list> </ion-list>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
</body> </body>

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Item Icons</ion-title> <ion-title>Item Icons</ion-title>
@ -109,7 +109,7 @@
<ion-badge slot="end">99</ion-badge> <ion-badge slot="end">99</ion-badge>
</ion-item> </ion-item>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<script> <script>

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Item Images</ion-title> <ion-title>Item Images</ion-title>
@ -90,7 +90,7 @@
</ion-label> </ion-label>
</ion-item> </ion-item>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<style> <style>

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Item inputs</ion-title> <ion-title>Item inputs</ion-title>
@ -81,7 +81,7 @@
</ion-item> </ion-item>
</ion-list> </ion-list>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<script> <script>

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Item Media</ion-title> <ion-title>Item Media</ion-title>
@ -89,7 +89,7 @@
<ion-icon name="close-circle" slot="end"></ion-icon> <ion-icon name="close-circle" slot="end"></ion-icon>
</ion-item> </ion-item>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<script> <script>

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar color="primary"> <ion-toolbar color="primary">
<ion-title>Item Reorder</ion-title> <ion-title>Item Reorder</ion-title>
@ -34,7 +34,7 @@
<ion-reorder-group id="endGroup"></ion-reorder-group> <ion-reorder-group id="endGroup"></ion-reorder-group>
</ion-list> </ion-list>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<style> <style>

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Item Sliding - Basic</ion-title> <ion-title>Item Sliding - Basic</ion-title>
@ -405,7 +405,7 @@
} }
</style> </style>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
</body> </body>
</html> </html>

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Item Text</ion-title> <ion-title>Item Text</ion-title>
@ -113,7 +113,7 @@
</ion-item> </ion-item>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
</body> </body>

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Label - Basic</ion-title> <ion-title>Label - Basic</ion-title>
@ -46,7 +46,7 @@
} }
</style> </style>
</ion-page>
</ion-app> </ion-app>
</body> </body>
</html> </html>

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>List - Basic</ion-title> <ion-title>List - Basic</ion-title>
@ -38,7 +38,7 @@
</ion-list> </ion-list>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
</body> </body>
</html> </html>

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Loading - Basic</ion-title> <ion-title>Loading - Basic</ion-title>
@ -57,7 +57,7 @@
</ion-row> </ion-row>
</ion-grid> </ion-grid>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<script> <script>
async function presentLoading() { async function presentLoading() {

View File

@ -55,7 +55,7 @@
</ion-content> </ion-content>
</ion-menu> </ion-menu>
<ion-page main> <div class="ion-page" main>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
@ -81,7 +81,7 @@
<ion-button onclick="openRight()">Menu Button Will Open Right</ion-button> <ion-button onclick="openRight()">Menu Button Will Open Right</ion-button>
</div> </div>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<ion-menu-controller></ion-menu-controller> <ion-menu-controller></ion-menu-controller>

View File

@ -43,7 +43,7 @@
</ion-menu> </ion-menu>
<ion-page main> <div class="ion-page" main>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
@ -56,7 +56,8 @@
<ion-button>Toggle Menu</ion-button> <ion-button>Toggle Menu</ion-button>
</ion-menu-toggle> </ion-menu-toggle>
</ion-content> </ion-content>
</ion-page>
</div>
</ion-app> </ion-app>
<ion-menu-controller></ion-menu-controller> <ion-menu-controller></ion-menu-controller>

View File

@ -30,7 +30,7 @@
</ion-menu> </ion-menu>
<ion-page main> <div class="ion-page" main>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
@ -233,8 +233,7 @@
</ion-item> </ion-item>
</ion-menu-toggle> </ion-menu-toggle>
</ion-content> </ion-content>
</ion-page> </div>
</ion-app> </ion-app>
<ion-menu-controller></ion-menu-controller> <ion-menu-controller></ion-menu-controller>
</body> </body>

View File

@ -64,7 +64,7 @@
</ion-content> </ion-content>
</ion-menu> </ion-menu>
<ion-page main> <div class="ion-page" main>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
@ -94,7 +94,7 @@
</ion-content> </ion-content>
</ion-page> </div>
</ion-app> </ion-app>
<ion-menu-controller></ion-menu-controller> <ion-menu-controller></ion-menu-controller>

View File

@ -41,7 +41,7 @@
</ion-menu> </ion-menu>
<ion-page main> <div class="ion-page" main>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
@ -62,8 +62,7 @@
<button onclick="setEnabled()">Set Swipe Enabled False</button> <button onclick="setEnabled()">Set Swipe Enabled False</button>
</p> </p>
</ion-content> </ion-content>
</div>
</ion-page>
<style> <style>
body { body {

View File

@ -10,7 +10,7 @@ async function presentModal() {
await modalController.componentOnReady(); await modalController.componentOnReady();
// create component to open // create component to open
const element = document.createElement('ion-page'); const element = document.createElement('div');
element.innerHTML = ` element.innerHTML = `
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>

View File

@ -15,7 +15,7 @@ async function presentModal() {
await modalController.componentOnReady(); await modalController.componentOnReady();
// create component to open // create component to open
const element = document.createElement('ion-page'); const element = document.createElement('div');
element.innerHTML = ` element.innerHTML = `
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Modal - Basic</ion-title> <ion-title>Modal - Basic</ion-title>
@ -23,7 +23,7 @@
<ion-button id="presentModal" class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button> <ion-button id="presentModal" class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button>
</p> </p>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<script> <script>
@ -36,7 +36,7 @@
await modalController.componentOnReady(); await modalController.componentOnReady();
// create component to open // create component to open
const element = document.createElement('ion-page'); const element = document.createElement('div');
element.innerHTML = ` element.innerHTML = `
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Modal - Host Elements</ion-title> <ion-title>Modal - Host Elements</ion-title>
@ -23,7 +23,7 @@
<ion-button class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button> <ion-button class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button>
</p> </p>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<script> <script>
@ -33,7 +33,7 @@
class ModalPage extends HTMLElement { class ModalPage extends HTMLElement {
async connectedCallback() { async connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Super Modal</ion-title> <ion-title>Super Modal</ion-title>
@ -43,8 +43,7 @@
<h1>Content of doom</h1> <h1>Content of doom</h1>
<div>Here's some more content</div> <div>Here's some more content</div>
<ion-button class="dismiss">Dismiss Modal</ion-button> <ion-button class="dismiss">Dismiss Modal</ion-button>
</ion-content> </ion-content>`;
</ion-page>`;
// listen for close event // listen for close event
const button = this.querySelector('ion-button'); const button = this.querySelector('ion-button');

View File

@ -30,7 +30,7 @@
async function loadFirstPage() { async function loadFirstPage() {
const nav = document.querySelector('ion-nav'); const nav = document.querySelector('ion-nav');
await nav.componentOnReady(); await nav.componentOnReady();
const firstPage = document.createElement('ion-page'); const firstPage = document.createElement('div');
firstPage.classList.add('first-page'); firstPage.classList.add('first-page');
firstPage.innerHTML = ` firstPage.innerHTML = `
<ion-header> <ion-header>
@ -54,7 +54,7 @@
} }
async function goToPageTwo(nav) { async function goToPageTwo(nav) {
const secondPage = document.createElement('ion-page'); const secondPage = document.createElement('div');
secondPage.classList.add('second-page'); secondPage.classList.add('second-page');
secondPage.innerHTML = ` secondPage.innerHTML = `
<ion-header> <ion-header>
@ -81,7 +81,7 @@
} }
async function goToPageThree(nav) { async function goToPageThree(nav) {
const thirdPage = document.createElement('ion-page'); const thirdPage = document.createElement('div');
thirdPage.classList.add('third-page'); thirdPage.classList.add('third-page');
thirdPage.innerHTML = ` thirdPage.innerHTML = `
<ion-header> <ion-header>

View File

@ -30,7 +30,7 @@
class FirstPage extends HTMLElement { class FirstPage extends HTMLElement {
async connectedCallback() { async connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Page One</ion-title> <ion-title>Page One</ion-title>
@ -42,7 +42,6 @@
<ion-button class="next">Go to Page Two</ion-button> <ion-button class="next">Go to Page Two</ion-button>
</ion-nav-push> </ion-nav-push>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }
@ -50,7 +49,7 @@
class SecondPage extends HTMLElement { class SecondPage extends HTMLElement {
async connectedCallback() { async connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Page Two</ion-title> <ion-title>Page Two</ion-title>
@ -65,7 +64,6 @@
<ion-button class="back">Go Back</ion-button> <ion-button class="back">Go Back</ion-button>
</ion-nav-pop> </ion-nav-pop>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }
@ -73,7 +71,7 @@
class ThirdPage extends HTMLElement { class ThirdPage extends HTMLElement {
async connectedCallback() { async connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Page Three</ion-title> <ion-title>Page Three</ion-title>
@ -85,7 +83,6 @@
<ion-button class="back">Go Back</ion-button> <ion-button class="back">Go Back</ion-button>
</ion-nav-pop> </ion-nav-pop>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }

View File

@ -17,7 +17,7 @@
class FirstPage extends HTMLElement { class FirstPage extends HTMLElement {
async connectedCallback() { async connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Page One</ion-title> <ion-title>Page One</ion-title>
@ -29,7 +29,6 @@
<ion-button class="next">Go to Page Two</ion-button> <ion-button class="next">Go to Page Two</ion-button>
</ion-nav-set-root> </ion-nav-set-root>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }
@ -37,7 +36,7 @@
class SecondPage extends HTMLElement { class SecondPage extends HTMLElement {
async connectedCallback() { async connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Page Two</ion-title> <ion-title>Page Two</ion-title>
@ -49,7 +48,6 @@
<ion-button class="next">Go to Page Three</ion-button> <ion-button class="next">Go to Page Three</ion-button>
</ion-nav-set-root> </ion-nav-set-root>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }
@ -57,7 +55,6 @@
class ThirdPage extends HTMLElement { class ThirdPage extends HTMLElement {
async connectedCallback() { async connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Page Three</ion-title> <ion-title>Page Three</ion-title>
@ -66,7 +63,6 @@
<ion-content padding> <ion-content padding>
<h1>Page Three</h1> <h1>Page Three</h1>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }

View File

@ -985,6 +985,7 @@ export function attachViewToDom(nav: Nav, enteringView: ViewController, ti: Tran
return ti.delegate.attachViewToDom(nav.element, enteringView.component, enteringView.data, [], ti.escapeHatch).then((mountingData) => { return ti.delegate.attachViewToDom(nav.element, enteringView.component, enteringView.data, [], ti.escapeHatch).then((mountingData) => {
ti.mountingData = mountingData; ti.mountingData = mountingData;
Object.assign(enteringView, mountingData); Object.assign(enteringView, mountingData);
mountingData.element.classList.add('ion-page');
enteringView.state = STATE_ATTACHED; enteringView.state = STATE_ATTACHED;
}) })
// implicit returns FTW // implicit returns FTW

View File

@ -9,7 +9,7 @@
class PageOne extends HTMLElement { class PageOne extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Page One</ion-title> <ion-title>Page One</ion-title>
@ -21,7 +21,6 @@
<ion-button class="next">Go to Page Two</ion-button> <ion-button class="next">Go to Page Two</ion-button>
</ion-nav-push> </ion-nav-push>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }
@ -29,7 +28,7 @@
class PageTwo extends HTMLElement { class PageTwo extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -47,7 +46,6 @@
</div> </div>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }
@ -55,7 +53,7 @@
class PageThree extends HTMLElement { class PageThree extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -67,7 +65,6 @@
<ion-content padding> <ion-content padding>
<h1>Page Three</h1> <h1>Page Three</h1>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }

View File

@ -17,7 +17,7 @@
class PageOne extends HTMLElement { class PageOne extends HTMLElement {
async connectedCallback() { async connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Page One</ion-title> <ion-title>Page One</ion-title>
@ -26,8 +26,7 @@
<ion-content padding> <ion-content padding>
<h1>Page One</h1> <h1>Page One</h1>
<ion-button class="next">Go to Page Two</ion-button> <ion-button class="next">Go to Page Two</ion-button>
</ion-content> </ion-content>`;
</ion-page>`;
const button = this.querySelector('ion-button'); const button = this.querySelector('ion-button');
button.addEventListener('click', async () => { button.addEventListener('click', async () => {
@ -39,7 +38,7 @@
class PageTwo extends HTMLElement { class PageTwo extends HTMLElement {
async connectedCallback() { async connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Page Two</ion-title> <ion-title>Page Two</ion-title>
@ -49,8 +48,7 @@
<h1>Page Two</h1> <h1>Page Two</h1>
<ion-button class="next">Go to Page Three</ion-button> <ion-button class="next">Go to Page Three</ion-button>
<ion-button class="previous">Go Back</ion-button> <ion-button class="previous">Go Back</ion-button>
</ion-content> </ion-content>`;
</ion-page>`;
const previousButton = this.querySelector('ion-button.previous'); const previousButton = this.querySelector('ion-button.previous');
previousButton.addEventListener('click', async () => { previousButton.addEventListener('click', async () => {
@ -67,7 +65,7 @@
class PageThree extends HTMLElement { class PageThree extends HTMLElement {
async connectedCallback() { async connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Page Three</ion-title> <ion-title>Page Three</ion-title>
@ -76,8 +74,7 @@
<ion-content padding> <ion-content padding>
<h1>Page Three</h1> <h1>Page Three</h1>
<ion-button class="previous">Go Back</ion-button> <ion-button class="previous">Go Back</ion-button>
</ion-content> </ion-content>`;
</ion-page>`;
const previousButton = this.querySelector('ion-button.previous'); const previousButton = this.querySelector('ion-button.previous');
previousButton.addEventListener('click', async () => { previousButton.addEventListener('click', async () => {

View File

@ -10,7 +10,7 @@
class PageOne extends HTMLElement { class PageOne extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -25,7 +25,6 @@
<ion-button class="next">Go to Page Two</ion-button> <ion-button class="next">Go to Page Two</ion-button>
</ion-nav-push> </ion-nav-push>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }
@ -41,7 +40,7 @@
class PageTwoSectionOne extends HTMLElement { class PageTwoSectionOne extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -59,7 +58,6 @@
<ion-button class="previous">Go Back</ion-button> <ion-button class="previous">Go Back</ion-button>
</div> </div>
</ion-content> </ion-content>
</ion-page>
`; `;
const button = this.querySelector('ion-button.previous'); const button = this.querySelector('ion-button.previous');
@ -75,7 +73,7 @@
class PageTwoSectionTwo extends HTMLElement { class PageTwoSectionTwo extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -90,7 +88,6 @@
<ion-button class="next">Go to Page Three</ion-button> <ion-button class="next">Go to Page Three</ion-button>
</ion-nav-push> </ion-nav-push>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }
@ -98,7 +95,7 @@
class PageThree extends HTMLElement { class PageThree extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -113,7 +110,7 @@
<ion-button class="previous">Go Back</ion-button> <ion-button class="previous">Go Back</ion-button>
</ion-nav-pop> </ion-nav-pop>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }
@ -121,7 +118,7 @@
class LoginPage extends HTMLElement { class LoginPage extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -136,7 +133,7 @@
<ion-button>Login</ion-button> <ion-button>Login</ion-button>
</ion-nav-push> </ion-nav-push>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }
@ -162,7 +159,7 @@
class TabOnePageOne extends HTMLElement { class TabOnePageOne extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -177,7 +174,7 @@
<ion-button class="next">Go to Tab One Page Two</ion-button> <ion-button class="next">Go to Tab One Page Two</ion-button>
</ion-nav-push> </ion-nav-push>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }
@ -185,7 +182,7 @@
class TabOnePageTwo extends HTMLElement { class TabOnePageTwo extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -202,7 +199,7 @@
</ion-nav-push> </ion-nav-push>
</div> </div>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }
@ -210,7 +207,7 @@
class TabOnePageThree extends HTMLElement { class TabOnePageThree extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -222,7 +219,7 @@
<ion-content padding> <ion-content padding>
<h1>Tab One Page Three</h1> <h1>Tab One Page Three</h1>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }
@ -230,7 +227,7 @@
class TabTwoPageOne extends HTMLElement { class TabTwoPageOne extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -245,7 +242,7 @@
<ion-button class="next">Go to Tab Two Page Two</ion-button> <ion-button class="next">Go to Tab Two Page Two</ion-button>
</ion-nav-push> </ion-nav-push>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }
@ -253,7 +250,7 @@
class TabTwoPageTwo extends HTMLElement { class TabTwoPageTwo extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -270,7 +267,7 @@
</ion-nav-push> </ion-nav-push>
</div> </div>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }
@ -278,7 +275,7 @@
class TabTwoPageThree extends HTMLElement { class TabTwoPageThree extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -290,7 +287,7 @@
<ion-content padding> <ion-content padding>
<h1>Tab Two Page Three</h1> <h1>Tab Two Page Three</h1>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }
@ -298,7 +295,7 @@
class TabThreePageOne extends HTMLElement { class TabThreePageOne extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -313,7 +310,7 @@
<ion-button class="next">Go to Tab Three Page Two</ion-button> <ion-button class="next">Go to Tab Three Page Two</ion-button>
</ion-nav-push> </ion-nav-push>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }
@ -321,7 +318,7 @@
class TabThreePageTwo extends HTMLElement { class TabThreePageTwo extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -338,7 +335,7 @@
</ion-nav-push> </ion-nav-push>
</div> </div>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }
@ -346,7 +343,7 @@
class TabThreePageThree extends HTMLElement { class TabThreePageThree extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -358,7 +355,7 @@
<ion-content padding> <ion-content padding>
<h1>Tab Three Page Three</h1> <h1>Tab Three Page Three</h1>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }

View File

@ -10,7 +10,7 @@
class PageOne extends HTMLElement { class PageOne extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -25,7 +25,6 @@
<ion-button class="next">Go to Page Two</ion-button> <ion-button class="next">Go to Page Two</ion-button>
</ion-nav-push> </ion-nav-push>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }
@ -41,7 +40,7 @@
class PageTwoSectionOne extends HTMLElement { class PageTwoSectionOne extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -59,7 +58,6 @@
<ion-button class="previous">Go Back</ion-button> <ion-button class="previous">Go Back</ion-button>
</div> </div>
</ion-content> </ion-content>
</ion-page>
`; `;
const button = this.querySelector('ion-button.previous'); const button = this.querySelector('ion-button.previous');
@ -75,7 +73,7 @@
class PageTwoSectionTwo extends HTMLElement { class PageTwoSectionTwo extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -90,7 +88,6 @@
<ion-button class="next">Go to Page Three</ion-button> <ion-button class="next">Go to Page Three</ion-button>
</ion-nav-push> </ion-nav-push>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }
@ -98,7 +95,7 @@
class PageThree extends HTMLElement { class PageThree extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -113,7 +110,6 @@
<ion-button class="previous">Go Back</ion-button> <ion-button class="previous">Go Back</ion-button>
</ion-nav-pop> </ion-nav-pop>
</ion-content> </ion-content>
</ion-page>
`; `;
} }
} }

View File

@ -63,10 +63,10 @@ export function buildMdTransition(rootTransition: Transition, enteringView: View
} }
function getIonPageElement(element: HTMLElement) { function getIonPageElement(element: HTMLElement) {
if (element.tagName.toLowerCase() === 'ion-page') { if (element.classList.contains('ion-page')) {
return element; return element;
} }
const ionPage = element.querySelector('ion-page'); const ionPage = element.querySelector('.ion-page');
if (ionPage) { if (ionPage) {
return ionPage; return ionPage;
} }

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Note - Basic</ion-title> <ion-title>Note - Basic</ion-title>
@ -130,7 +130,7 @@
</ion-list> </ion-list>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<script> <script>

View File

@ -1,19 +0,0 @@
import { Component } from '@stencil/core';
@Component({
tag: 'ion-page',
})
export class Page {
hostData() {
return {
class: {
'ion-page': true
}
};
}
render() {
return <slot></slot>;
}
}

View File

@ -1,11 +0,0 @@
# ion-page
<!-- Auto Generated Below -->
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Page - Basic</ion-title> <ion-title>Page - Basic</ion-title>
@ -20,7 +20,7 @@
<ion-content padding> <ion-content padding>
Ion Page Content Ion Page Content
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
</body> </body>

View File

@ -12,7 +12,7 @@
class PageOne extends HTMLElement { class PageOne extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Page One</ion-title> <ion-title>Page One</ion-title>

View File

@ -10,7 +10,7 @@
<body> <body>
<div style="height: 300px"> <div style="height: 300px">
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Page - No Ion App Basic</ion-title> <ion-title>Page - No Ion App Basic</ion-title>
@ -20,8 +20,6 @@
<ion-content padding> <ion-content padding>
Ion Page Content Ion Page Content
</ion-content> </ion-content>
</ion-page>
</div>
</body> </body>
</html> </html>

View File

@ -12,7 +12,7 @@
class PageOne extends HTMLElement { class PageOne extends HTMLElement {
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>No Ion App Page One</ion-title> <ion-title>No Ion App Page One</ion-title>

View File

@ -10,7 +10,7 @@
<body onload="initialize()"> <body onload="initialize()">
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Platform - basic</ion-title> <ion-title>Platform - basic</ion-title>
@ -29,7 +29,7 @@
<h2>The ready event has fired: <span class="ready"></span></h2> <h2>The ready event has fired: <span class="ready"></span></h2>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<script> <script>

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar color="primary"> <ion-toolbar color="primary">
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -41,7 +41,7 @@
<ion-title>Popover</ion-title> <ion-title>Popover</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-footer> </ion-footer>
</ion-page>
</ion-app> </ion-app>
<script> <script>

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
@ -47,8 +47,6 @@
<ion-button onClick="toggleDisabled()">Toggle Disabled</ion-button> <ion-button onClick="toggleDisabled()">Toggle Disabled</ion-button>
</ion-content> </ion-content>
</ion-page>
<script> <script>
var dynamicDisabled = document.getElementById('dynamicDisabled'); var dynamicDisabled = document.getElementById('dynamicDisabled');

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
@ -67,8 +67,6 @@
</ion-content> </ion-content>
</ion-page>
<script> <script>
var changes = 0; var changes = 0;

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Radio - Basic</ion-title> <ion-title>Radio - Basic</ion-title>
@ -135,7 +135,6 @@
</ion-item> </ion-item>
</ion-content> </ion-content>
</ion-page>
<script> <script>
var radioValues = ['fruitRadio', 'pizzaRadio', 'veggiesRadio']; var radioValues = ['fruitRadio', 'pizzaRadio', 'veggiesRadio'];

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Range - Basic</ion-title> <ion-title>Range - Basic</ion-title>
@ -99,7 +99,7 @@
<ion-button onclick="elTest()">Test</ion-button> <ion-button onclick="elTest()">Test</ion-button>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<script> <script>

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
@ -31,7 +31,7 @@
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<ion-menu-controller></ion-menu-controller> <ion-menu-controller></ion-menu-controller>

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Reorder - Basic</ion-title> <ion-title>Reorder - Basic</ion-title>
@ -106,7 +106,7 @@
</ion-reorder-group> </ion-reorder-group>
</ion-list> </ion-list>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<script> <script>

View File

@ -19,7 +19,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Button Effect - Basic</ion-title> <ion-title>Button Effect - Basic</ion-title>
@ -55,7 +55,7 @@
<ion-ripple-effect></ion-ripple-effect> <ion-ripple-effect></ion-ripple-effect>
</div> </div>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<script> <script>
function blockClicked() { function blockClicked() {

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Searchbar - Basic</ion-title> <ion-title>Searchbar - Basic</ion-title>
@ -111,7 +111,7 @@
} }
</script> </script>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
</body> </body>

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header no-border translucent> <ion-header no-border translucent>
<ion-toolbar> <ion-toolbar>
<ion-title>Searchbar - Toolbar</ion-title> <ion-title>Searchbar - Toolbar</ion-title>
@ -88,7 +88,7 @@
</ion-toolbar> </ion-toolbar>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<style> <style>

View File

@ -10,7 +10,7 @@
<body onload="listenForEvent()"> <body onload="listenForEvent()">
<ion-app> <ion-app>
<ion-page>
<ion-header no-border> <ion-header no-border>
<ion-toolbar> <ion-toolbar>
<ion-title>Segment - Basic</ion-title> <ion-title>Segment - Basic</ion-title>
@ -189,7 +189,7 @@
</script> </script>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
</body> </body>

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Select - Basic</ion-title> <ion-title>Select - Basic</ion-title>
@ -246,7 +246,6 @@
</div> </div>
</ion-content> </ion-content>
</ion-page>
<script> <script>
var pets = document.getElementById('pets'); var pets = document.getElementById('pets');

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Select Item: Multiple Value</ion-title> <ion-title>Select Item: Multiple Value</ion-title>
@ -111,7 +111,6 @@
</ion-item> </ion-item>
</ion-content> </ion-content>
</ion-page>
<script> <script>
var toppings = document.getElementById('toppings'); var toppings = document.getElementById('toppings');

View File

@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Select Item: Single Value</ion-title> <ion-title>Select Item: Single Value</ion-title>
@ -155,7 +155,6 @@
<br> <br>
</p> </p>
</ion-content> </ion-content>
</ion-page>
<script> <script>
let selects = document.querySelectorAll('ion-select'); let selects = document.querySelectorAll('ion-select');

View File

@ -10,7 +10,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Show when - Basic</ion-title> <ion-title>Show when - Basic</ion-title>
@ -94,7 +94,7 @@
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<script> <script>

View File

@ -29,7 +29,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-page>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
@ -79,7 +79,7 @@
</ion-slide> </ion-slide>
</ion-slides> </ion-slides>
</ion-content> </ion-content>
</ion-page>
</ion-app> </ion-app>
<script> <script>
const slides = document.querySelector('.slides') const slides = document.querySelector('.slides')

Some files were not shown because too many files have changed in this diff Show More