diff --git a/demos/action-sheet/app.html b/demos/action-sheet/app.html new file mode 100644 index 0000000000..5f6bb33d68 --- /dev/null +++ b/demos/action-sheet/app.html @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/demos/action-sheet/index.ts b/demos/action-sheet/index.ts index 5775b714b8..829799ce6b 100644 --- a/demos/action-sheet/index.ts +++ b/demos/action-sheet/index.ts @@ -1,41 +1,51 @@ -import {App, ActionSheet} from 'ionic/ionic'; - +import {App, Page, IonicApp, Config, Platform} from 'ionic/ionic'; +import {ActionSheet} from 'ionic/ionic'; @App({ + templateUrl: 'app.html' +}) +class ApiDemoApp { + + constructor() { + this.rootPage = InitialPage; + } +} + +@Page({ templateUrl: 'main.html' }) -class IonicApp { - - constructor(actionSheet: ActionSheet) { +export class InitialPage { + constructor(actionSheet: ActionSheet, platform: Platform) { this.actionSheet = actionSheet; + this.platform = platform; } - openMenu() { + open() { this.actionSheet.open({ buttons: [ - { text: 'Share This' }, - { text: 'Move' } + { text: 'Share'}, + { text: 'Play'}, + { text: 'Favorite'} ], destructiveText: 'Delete', - titleText: 'Modify your album', + titleText: 'Albums', cancelText: 'Cancel', - cancel: function() { + cancel: () => { console.log('Canceled'); }, destructiveButtonClicked: () => { console.log('Destructive clicked'); }, - buttonClicked: function(index) { + buttonClicked: (index) => { console.log('Button clicked', index); - if(index == 1) { return false; } + if (index == 1) { return false; } return true; } }).then(actionSheetRef => { this.actionSheetRef = actionSheetRef; }); - } - } + diff --git a/demos/action-sheet/main.html b/demos/action-sheet/main.html index e22f9e3ca7..58ebcd2cac 100644 --- a/demos/action-sheet/main.html +++ b/demos/action-sheet/main.html @@ -1,3 +1,9 @@ + + Action Sheet + + - - + + + + diff --git a/demos/hide-when/app.html b/demos/hide-when/app.html new file mode 100644 index 0000000000..776be9a94a --- /dev/null +++ b/demos/hide-when/app.html @@ -0,0 +1 @@ + diff --git a/demos/hide-when/index.ts b/demos/hide-when/index.ts new file mode 100644 index 0000000000..a1884eb2c1 --- /dev/null +++ b/demos/hide-when/index.ts @@ -0,0 +1,20 @@ +import {App, Page, IonicApp} from 'ionic/ionic'; + +@App({ + templateUrl: 'app.html' +}) +class ApiDemoApp { + + constructor() { + this.rootPage = InitialPage; + } +} + +@Page({ + templateUrl: 'main.html' +}) +export class InitialPage { + constructor() { + } +} + diff --git a/demos/hide-when/main.html b/demos/hide-when/main.html new file mode 100644 index 0000000000..2beb4739eb --- /dev/null +++ b/demos/hide-when/main.html @@ -0,0 +1,9 @@ + + HideWhen + + + +

+ (hide-when="android") This text is hidden on Android only. Click the Android tab to hide this text. +

+ diff --git a/demos/show-when/app.html b/demos/show-when/app.html new file mode 100644 index 0000000000..776be9a94a --- /dev/null +++ b/demos/show-when/app.html @@ -0,0 +1 @@ + diff --git a/demos/show-when/index.ts b/demos/show-when/index.ts new file mode 100644 index 0000000000..a1884eb2c1 --- /dev/null +++ b/demos/show-when/index.ts @@ -0,0 +1,20 @@ +import {App, Page, IonicApp} from 'ionic/ionic'; + +@App({ + templateUrl: 'app.html' +}) +class ApiDemoApp { + + constructor() { + this.rootPage = InitialPage; + } +} + +@Page({ + templateUrl: 'main.html' +}) +export class InitialPage { + constructor() { + } +} + diff --git a/demos/show-when/main.html b/demos/show-when/main.html new file mode 100644 index 0000000000..bacd10e446 --- /dev/null +++ b/demos/show-when/main.html @@ -0,0 +1,9 @@ + + ShowWhen + + + +

+ (show-when="ios") This text is shown on iOS only. Click the Android tab to hide this text. +

+ diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts index 88b4516b02..a59d9280d8 100644 --- a/ionic/components/action-sheet/action-sheet.ts +++ b/ionic/components/action-sheet/action-sheet.ts @@ -109,6 +109,7 @@ class ActionSheetCmp { * } * ``` * + * @demo /docs/v2/demos/action-sheet/ * @see {@link /docs/v2/components#action-sheets ActionSheet Component Docs} */ @Injectable() diff --git a/ionic/components/show-hide-when/show-hide-when.ts b/ionic/components/show-hide-when/show-hide-when.ts index 22827aa989..3c150bdf25 100644 --- a/ionic/components/show-hide-when/show-hide-when.ts +++ b/ionic/components/show-hide-when/show-hide-when.ts @@ -53,12 +53,15 @@ class DisplayWhen { /** * - * The `show-when` attribute takes a value or expression, and only shows the element it has been added to when - * the value or expression is true. Complements the [hide-when attribute](../HideWhen). + * The `show-when` attribute takes a string that represents a plaform or screen orientation. + * The element the attribute is added to will only be shown when that platform or screen orientation is active. + * Complements the [hide-when attribute](../HideWhen). * @usage * ```html - *
I am hidden!
+ *
I am only visible on iOS!
* ``` + * @demo /docs/v2/demos/show-when/ + * @see {@link ../HideWhen HideWhen API Docs} */ @Directive({ selector: '[show-when]', @@ -87,12 +90,15 @@ export class ShowWhen extends DisplayWhen { /** * - * The `hide-when` attribute takes a value or expression, and hides the element it has been added to when - * the value or expression is true. Complements the [show-when attribute](../ShowWhen). + * The `hide-when` attribute takes a string that represents a plaform or screen orientation. + * The element the attribute is added to will only be hidden when that platform or screen orientation is active. + * Complements the [show-when attribute](../ShowWhen). * @usage * ```html - *
I am hidden!
+ *
I am hidden on Android!
* ``` + * @demo /docs/v2/demos/hide-when/ + * @see {@link ../ShowWhen ShowWhen API Docs} */ @Directive({ selector: '[hide-when]',