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

Aside

Browse Source
This commit is contained in:
Max Lynch
2015-05-19 13:36:38 +02:00
parent 8110a7ad5d
commit d91c4e75c8
3 changed files with 46 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
ionic/components/app/test/music/index.js
View File

@ -16,7 +16,7 @@ import {
@Component({selector: 'ion-view'}) @Component({selector: 'ion-view'})
@View({ @View({
templateUrl: 'pages/app.html', templateUrl: 'pages/app.html',
directives: [Content, Button] directives: [Nav, List, Item, Content, Button, HeaderTemplate, Toolbar]
}) })
class AppPage { class AppPage {
constructor(nav: NavController) { constructor(nav: NavController) {
@ -93,12 +93,16 @@ export class ParallaxEffect {
parallaxItems() { parallaxItems() {
let list = this.domElement; let list = this.domElement;
console.log('Moving items', this.parallax); console.log('Moving items', this.parallax);
var x = Math.max(0, (1 - this.parallax) * 40); var x = Math.max(0, (1 - this.parallax) * 20);
var y = 0;//Math.max(0, (1 - this.parallax) * 10);
var scale = Math.min(1, (0.9 + 0.1 * this.parallax));
list.style['opacity'] = Math.min(this.parallax, 1); list.style['opacity'] = Math.min(this.parallax, 1);
list.style['transform'] = 'translate3d(' + x + 'px, 0, 0)'; list.style['transform'] = 'translate3d(' + x + 'px, ' + y + 'px, 0) scale(' + scale + ')';
} }
} }
//300
//1 to 0.9
export function main() { export function main() {
bootstrap(IonicApp); bootstrap(IonicApp);
} }

22
ionic/components/app/test/music/main.html
View File

@ -37,25 +37,37 @@
background: url('http://ionic-io-assets.s3.amazonaws.com/menu.jpg'); background: url('http://ionic-io-assets.s3.amazonaws.com/menu.jpg');
background-size: cover; background-size: cover;
} }
#menu ion-item { .platform-ios ion-list .item {
background: transparent; background: transparent;
min-height: 55px; min-height: 55px;
} }
#menu ion-item .item-content { .platform-ios ion-list .item .item-content {
background: transparent; background: transparent;
color: rgba(255,255,255,0.8); color: rgba(255,255,255,0.8);
padding: 10px; padding: 10px;
} }
.platform-ios .toolbar-ios ion-title {
color: white;
font-size: 14px;
font-weight: normal;
letter-spacing: 2px;
}
#menu ion-item .item-label { #menu ion-item .item-label {
font-size: 22px; font-size: 22px;
} }
ion-content {
background: transparent !important;
}
.platform-ios #menu .item-content:after { .platform-ios #menu .item-content:after {
background: none; background: none;
} }
.platform-ios #menu .item:first-of-type:before { .platform-ios .item:first-of-type:before {
background: none; background: none !important;
} }
.platform-ios #menu .item:last-of-type:after { .platform-ios .item:last-of-type:after {
background: none !important;
}
.platform-ios .toolbar-container-ios:after {
background: none; background: none;
} }

25
ionic/components/app/test/music/pages/app.html
View File

@ -1,3 +1,22 @@
<div> <ion-toolbar *header>
<h3>Music</h3>
</div> <ion-title>YOUR MUSIC</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<ion-item>
Playlight
</ion-item>
<ion-item>
Songs
</ion-item>
<ion-item>
Albums
</ion-item>
<ion-item>
Artists
</ion-item>
</ion-list>
</ion-content>