diff --git a/demos/component-docs/app.css b/demos/component-docs/app.css
new file mode 100644
index 0000000000..08f2652abd
--- /dev/null
+++ b/demos/component-docs/app.css
@@ -0,0 +1,7 @@
+body {
+ cursor: url('http://ionicframework.com/img/finger.png'), auto;
+}
+
+section.hidden {
+ display: none !important;
+}
diff --git a/demos/component-docs/index.ts b/demos/component-docs/index.ts
new file mode 100644
index 0000000000..ec8ee55d69
--- /dev/null
+++ b/demos/component-docs/index.ts
@@ -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;
+ });
+ }
+
+
+}
\ No newline at end of file
diff --git a/demos/component-docs/main.html b/demos/component-docs/main.html
new file mode 100644
index 0000000000..f364a7fa34
--- /dev/null
+++ b/demos/component-docs/main.html
@@ -0,0 +1,49 @@
+
+{{ component.title }}
+
+
diff --git a/gulpfile.js b/gulpfile.js
index 44f2681433..b1f5aff1d6 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -58,6 +58,7 @@ gulp.task('build', function(done) {
'bundle',
'e2e',
'demos',
+ 'copy.docs-demo',
'sass',
'fonts',
done
diff --git a/scripts/demos/index.template.html b/scripts/demos/index.template.html
index 6c5ec2649d..bc1240c66d 100644
--- a/scripts/demos/index.template.html
+++ b/scripts/demos/index.template.html
@@ -6,6 +6,8 @@
+
+