javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(demos): add local app.css to each demo

Browse Source
This commit is contained in:
Drew Rygh
2015-09-30 14:01:53 -05:00
parent c1959cfef3
commit 3042e7e9d0
5 changed files with 108 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
demos/component-docs/app.css Normal file
View File

@@ -0,0 +1,7 @@
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
section.hidden {
display: none !important;
}

49
demos/component-docs/index.ts Normal file
View File

@@ -0,0 +1,49 @@
import {App, ActionSheet} from 'ionic/ionic';
function toTitleCase(str) {
return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}
@App({
templateUrl: 'main.html'
})
class DemoApp {
constructor(actionSheet: ActionSheet) {
this.actionSheet = actionSheet;
this.component = {
title: 'Action Sheet',
}
window.onmessage = (e) => {
this.component.title = toTitleCase(e.data.replace('-', ' '));
};
}
openMenu() {
this.actionSheet.open({
buttons: [
{ text: 'Share This' },
{ text: 'Move' }
],
destructiveText: 'Delete',
titleText: 'Modify your album',
cancelText: 'Cancel',
cancel: function() {
console.log('Canceled');
},
destructiveButtonClicked: () => {
console.log('Destructive clicked');
},
buttonClicked: function(index) {
console.log('Button clicked', index);
if(index == 1) { return false; }
return true;
}
}).then(actionSheetRef => {
this.actionSheetRef = actionSheetRef;
});
}
}

49
demos/component-docs/main.html Normal file
View File

@@ -0,0 +1,49 @@
<ion-toolbar><ion-title>{{ component.title }}</ion-title></ion-toolbar>
<ion-content class="has-header padding components-demo">
<section id="action-sheet" [ng-class]="{hidden: component.title !== 'Action Sheet' }">
<button class="button" (click)="openMenu()">
Show Actionsheet
</button>
</section>
<section id="animation" [ng-class]="{hidden: component.title !== 'Animations' }">
TODO
</section>
<section id="buttons" [ng-class]="{hidden: component.title !== 'Buttons' }">
TODO
</section>
<section id="cards" [ng-class]="{hidden: component.title !== 'Cards' }">
TODO
</section>
<section id="icons" [ng-class]="{hidden: component.title !== 'Icons' }">
TODO
</section>
<section id="lists" [ng-class]="{hidden: component.title !== 'Lists' }">
TODO
</section>
<section id="menus" [ng-class]="{hidden:component.title !== 'Menus' }">
TODO
</section>
<section id="modals" [ng-class]="{hidden: component.title !== 'Modals' }">
TODO
</section>
<section id="navigation" [ng-class]="{hidden: component.title !== 'Navigation' }">
TODO
</section>
<section id="slides" [ng-class]="{hidden: component.title !== 'Slides' }">
TODO
</section>
<section id="tabs" [ng-class]="{hidden: component.title !== 'Tabs' }">
TODO
</section>
</ion-content>

1
gulpfile.js
View File

@@ -58,6 +58,7 @@ gulp.task('build', function(done) {
'bundle',
'e2e',
'demos',
'copy.docs-demo',
'sass',
'fonts',
done

2
scripts/demos/index.template.html
View File

@@ -6,6 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="../../css/ionic.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>