javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(): add demos and docs

Browse Source
This commit is contained in:
mhartington
2018-01-11 17:01:19 -05:00
parent ab9498403c
commit 512a08f396
11 changed files with 219 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
packages/demos/angular/src/app/content/content-page.component.ts Normal file
View File

@ -0,0 +1,72 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-card-page',
styles: [
`
div.box {
display: block;
margin: 15px auto;
max-width: 150px;
height: 150px;
background: blue;
}
div.box:last-of-type {
background: yellow;
}
`
],
template: `
<ion-app>
<ion-page class="show-page">
<ion-header #header>
<ion-toolbar style="display: none" #toolbar>
<ion-title>Hidden Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-title>Content - Basic</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding style="text-align: center" #content>
<p>
<ion-button (click)="toggleFullscreen(content)">Toggle content.fullscreen</ion-button>
<p>
<ion-button (click)="toggleDisplay(header)" color="secondary">Toggle header</ion-button>
<ion-button (click)="toggleDisplay(footer)" color="secondary">Toggle footer</ion-button>
<ion-button (click)="toggleDisplay(toolbar)" color="secondary">Toggle 2nd toolbar</ion-button>
</p>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</ion-content>
<ion-footer #footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
</ion-page>
</ion-app>
`
})
export class ContentPageComponent {
constructor() {}
toggleFullscreen(content) {
content.fullscreen = !content.fullscreen;
console.log('content.fullscren =', content.fullscreen);
}
toggleDisplay(el) {
el.style.display = !el.style.display ? 'none' : null;
}
}