diff --git a/demos/list/app.html b/demos/list/app.html new file mode 100644 index 0000000000..8eb67f058c --- /dev/null +++ b/demos/list/app.html @@ -0,0 +1,24 @@ + + + + Menu + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/demos/list/main.html b/demos/list/basic-list.html similarity index 68% rename from demos/list/main.html rename to demos/list/basic-list.html index ee99360090..ba143f812b 100644 --- a/demos/list/main.html +++ b/demos/list/basic-list.html @@ -1,4 +1,15 @@ -List Headers + + + + + + + + + Basic List + + + @@ -29,15 +40,6 @@ - - - - - - - List Header - - Magic @@ -51,15 +53,6 @@ - - - - - - - List Header with text that is too long to fit inside the list header - - Pizza @@ -87,18 +80,4 @@ - - - - - New List, no header, Item 1 - - - - - New List, no header, Item 2 - - - - diff --git a/demos/list/index.ts b/demos/list/index.ts index 43aed36502..6195778ebd 100644 --- a/demos/list/index.ts +++ b/demos/list/index.ts @@ -1,7 +1,71 @@ -import {App} from 'ionic/ionic'; +import {App, IonicApp, Page, Platform} from 'ionic/ionic'; @App({ - templateUrl: 'main.html' + templateUrl: 'app.html' }) -class E2EApp {} +class ApiDemoApp { + + constructor(app: IonicApp, platform: Platform) { + this.app = app; + this.platform = platform; + this.rootPage = PageOne; + this.pages = [ + { title: 'Basic List', component: PageOne }, + { title: 'Inset List', component: PageTwo }, + { title: 'No-lines List', component: PageThree }, + { title: 'List Headers', component: PageFour }, + { title: 'Sliding Items', component: PageFive }, + + + ]; + + } + + openPage(page) { + this.app.getComponent('leftMenu').close(); + let nav = this.app.getComponent('nav'); + nav.setRoot(page.component); + } + +} + +@Page({ + templateUrl: 'basic-list.html', +}) +export class PageOne{ + constructor() { + } +} + +@Page({ + templateUrl: 'inset-list.html', +}) +export class PageTwo { + constructor() { + } +} + +@Page({ + templateUrl: 'no-lines-list.html', +}) +export class PageThree { + constructor() { + } +} + +@Page({ + templateUrl: 'list-headers.html', +}) +export class PageFour { + constructor() { + } +} + +@Page({ + templateUrl: 'sliding-items.html', +}) +export class PageFive { + constructor() { + } +} diff --git a/demos/list/inset-list.html b/demos/list/inset-list.html new file mode 100644 index 0000000000..0aaf03e24d --- /dev/null +++ b/demos/list/inset-list.html @@ -0,0 +1,83 @@ + + + + + + + + + Inset List + + + + + + + + + + List Header + + + + + Wifi + + + + + Affection + + Very Little + + + + + + Home + + Where the heart is + + + + + + Magic + + + + + Star status + + Super + + + + + + Pizza + + Always + + + + + + Beer + + Yes Plz + + + + + + Wine + + All the time + + + + + + + diff --git a/demos/list/list-headers.html b/demos/list/list-headers.html new file mode 100644 index 0000000000..f0ca3edbd7 --- /dev/null +++ b/demos/list/list-headers.html @@ -0,0 +1,37 @@ + + + + + + + + + List Headers + + + + + + + + Comedy + Airplane! + Caddyshack + Coming To America + + + + Action + Terminator II + The Empire Strikes Back + Blade Runner + + + + Horror + The Evil Dead + Poldergeist + Aliens + + + diff --git a/demos/list/no-lines-list.html b/demos/list/no-lines-list.html new file mode 100644 index 0000000000..734b743271 --- /dev/null +++ b/demos/list/no-lines-list.html @@ -0,0 +1,83 @@ + + + + + + + + + No-lines List + + + + + + + + + + List Header + + + + + Wifi + + + + + Affection + + Very Little + + + + + + Home + + Where the heart is + + + + + + Magic + + + + + Star status + + Super + + + + + + Pizza + + Always + + + + + + Beer + + Yes Plz + + + + + + Wine + + All the time + + + + + + + diff --git a/demos/list/sliding-items.html b/demos/list/sliding-items.html new file mode 100644 index 0000000000..5158570b9a --- /dev/null +++ b/demos/list/sliding-items.html @@ -0,0 +1,59 @@ + + + + + + + + + Sliding Items + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ionic/components/scroll/scroll.ts b/ionic/components/scroll/scroll.ts index f095bdcbfe..30fcdcbae8 100644 --- a/ionic/components/scroll/scroll.ts +++ b/ionic/components/scroll/scroll.ts @@ -9,8 +9,24 @@ import {Animation} from '../../animations/animation'; import * as util from 'ionic/util'; /** - * Scroll is a non-flexboxed scroll area that can scroll horizontally or - * vertically. + * @name Scroll + * @description + * Scroll is a non-flexboxed scroll area that can scroll horizontally or vertically. `ion-Scroll` Can be used in places were you may not need a full page scroller, but a highly customized one, such as image scubber or comment scroller. + * @usage + * ```html + * + * + * + * + * + * + * + * + * ``` + *@property {boolean} [scroll-x] - whether to enable scrolling along the X axis + *@property {boolean} [scroll-y] - whether to enable scrolling along the Y axis + *@property {boolean} [zoom] - whether to enable zooming + *@property {number} [max-zoom] - set the max zoom amount for ion-scroll */ @Component({ selector: 'ion-scroll', diff --git a/ionic/components/segment/segment.ts b/ionic/components/segment/segment.ts index b53c2c4dd3..9c6a262de5 100644 --- a/ionic/components/segment/segment.ts +++ b/ionic/components/segment/segment.ts @@ -5,10 +5,12 @@ import {Config} from '../../config/config'; /** + * @name Segment * @description * A Segment is a group of buttons, sometimes known as Segmented Controls, that allow the user to interact with a compact group of a number of controls. - * * Segments provide functionality similar to tabs, selecting one will unselect all others. You should use a tab bar instead of a segmented control when you want to let the user move back and forth between distinct pages in your app. + * You could use Angular 2's `ng-model` or `FormBuilder` API. For an overview on how `FormBuilder` works, checkout [Angular 2 Forms](http://learnangular2.com/forms/), or [Angular FormBuilder](https://angular.io/docs/ts/latest/api/common/FormBuilder-class.html) + * * * @usage * ```html @@ -20,8 +22,11 @@ import {Config} from '../../config/config'; * Enemies * * + *``` * + * Or with `FormBuilder` * + *```html *
* * @@ -38,6 +43,7 @@ import {Config} from '../../config/config'; * ``` * * @see {@link /docs/v2/components#segment Segment Component Docs} + * @see [Angular 2 Forms](http://learnangular2.com/forms/) */ @Directive({ selector: 'ion-segment' @@ -127,6 +133,43 @@ export class Segment extends Ion { } +/** + * @name SegmentButton + * @description + * The child buttons of the `ion-segment` component. Each `ion-segment-button` must have a value. + * @property {string} [value] - the value of the segment-button. + * @usage + * ```html + * + * + * Friends + * + * + * Enemies + * + * + *``` + * + * Or with `FormBuilder` + * + *```html + * + * + * + * Standard + * + * + * Hybrid + * + * + * Satellite + * + * + * + * ``` + * @see {@link /docs/v2/components#segment Segment Component Docs} + * @see {@link /docs/v2/api/components/segment/Segment/ Segment API Docs} + */ @Directive({ selector: 'ion-segment-button', inputs: [ diff --git a/ionic/components/switch/switch.ts b/ionic/components/switch/switch.ts index af7944b222..644ca18e37 100644 --- a/ionic/components/switch/switch.ts +++ b/ionic/components/switch/switch.ts @@ -39,7 +39,10 @@ class MediaSwitch { * Switches can also have colors assigned to them, by adding any color attribute to them. * * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input. - * + * @property {any} [value] - the inital value of the switch + * @property {boolean} [checked] - whether the switch it toggled or not + * @property {boolean} [disabled] - whether the switch is disabled or not + * @property {string} [id] - a unique ID for a switch * @usage * ```html * // Create a single switch diff --git a/scripts/docs/templates/common.template.html b/scripts/docs/templates/common.template.html index 7b3092ecf5..38fb11d552 100644 --- a/scripts/docs/templates/common.template.html +++ b/scripts/docs/templates/common.template.html @@ -10,7 +10,8 @@ header_sub_title: "<$ doc.docType | capital $> in module <$ doc.module $>" doc: "<$ doc.name $>" docType: "<$ doc.docType $>" <@ if doc.demo @>show_preview_device: true -preview_device_url: "<$ doc.demo $>"<@ endif @> +preview_device_url: "<$ doc.demo $>" +angular_controller: APIDemoCtrl <@ endif @> ---