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/button/button.ts b/ionic/components/button/button.ts index f70ac17c63..39f345eb3e 100644 --- a/ionic/components/button/button.ts +++ b/ionic/components/button/button.ts @@ -37,7 +37,7 @@ export class Button { ) { this._role = 'button'; // bar-button/item-button this._size = null; // large/small - this._style = null; // outline/clear/solid + this._style = 'default'; // outline/clear/solid this._shape = null; // round/fab this._display = null; // block/full this._colors = []; // primary/secondary @@ -136,14 +136,13 @@ export class Button { if (role) { this.renderer.setElementClass(this.elementRef, role, assignCssClass); // button - this._setClass(this._style, assignCssClass); // button-clear this._setClass(this._style, assignCssClass); // button-clear this._setClass(this._shape, assignCssClass); // button-round this._setClass(this._display, assignCssClass); // button-full this._setClass(this._size, assignCssClass); // button-small this._setClass(this._icon, assignCssClass); // button-icon-left - let colorStyle = (this._style && this._style !== 'solid' ? this._style + '-' : ''); + let colorStyle = (this._style !== 'default' ? this._style + '-' : ''); this._colors.forEach(colorName => { this._setClass(colorStyle + colorName, assignCssClass); // button-secondary, button-clear-secondary }); diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss index d9b54cb92a..983747486a 100644 --- a/ionic/components/button/modes/ios.scss +++ b/ionic/components/button/modes/ios.scss @@ -118,8 +118,9 @@ $button-ios-small-icon-font-size: 1.3em !default; border-width: 1px; border-style: solid; border-color: $button-ios-color; - background-color: transparent; color: $button-ios-color; + background-color: transparent; + border-radius: 4px; &.activated { opacity: 1; @@ -137,8 +138,8 @@ $button-ios-small-icon-font-size: 1.3em !default; .button-outline-#{$color-name} { $fg-color: color-shade($color-value, 5%); border-color: $fg-color; - background-color: transparent; color: $fg-color; + background-color: transparent; &.activated { color: $background-ios-color; @@ -182,13 +183,13 @@ $button-ios-small-icon-font-size: 1.3em !default; &.activated { opacity: 0.4; - background-color: transparent; } &:hover:not(.disable-hover) { color: color-shade($fg-color); } } + } // iOS Round Button diff --git a/ionic/components/button/test/button.spec.ts b/ionic/components/button/test/button.spec.ts index e2a4e2f7aa..333915c3d6 100644 --- a/ionic/components/button/test/button.spec.ts +++ b/ionic/components/button/test/button.spec.ts @@ -82,8 +82,21 @@ export function run() { b._assignCss(true); expect(hasClass(b, 'button')).toEqual(true); expect(hasClass(b, 'button-solid')).toEqual(true); - expect(hasClass(b, 'button-primary')).toEqual(true); - expect(hasClass(b, 'button-secondary')).toEqual(true); + expect(hasClass(b, 'button-solid-primary')).toEqual(true); + expect(hasClass(b, 'button-solid-secondary')).toEqual(true); + }); + + it('should auto add the default style', () => { + let b = mockButton(); + b._assignCss(true); + expect(hasClass(b, 'button')).toEqual(true); + expect(hasClass(b, 'button-default')).toEqual(true); + + b = mockButton(['clear']); + b._assignCss(true); + expect(hasClass(b, 'button')).toEqual(true); + expect(hasClass(b, 'button-default')).toEqual(false); + expect(hasClass(b, 'button-clear')).toEqual(true); }); it('should read button color attributes', () => { @@ -180,7 +193,7 @@ export function run() { expect(b._role).toEqual('button'); expect(b._size).toEqual(null); expect(b._colors.length).toEqual(0); - expect(b._style).toEqual(null); + expect(b._style).toEqual('default'); expect(b._display).toEqual(null); }); 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/modes/md.scss b/ionic/components/segment/modes/md.scss index 896a7b63a2..aae45fcda5 100644 --- a/ionic/components/segment/modes/md.scss +++ b/ionic/components/segment/modes/md.scss @@ -13,28 +13,24 @@ $segment-button-md-border-color-activated: map-get($colors-md, primary) !def $segment-button-md-border-bottom: 2px solid rgba(#000000, 0.10) !default; -ion-segment { +.segment-button { + border-width: 0; + transition: 100ms all linear; + font-size: $segment-button-md-font-size; + opacity: 0.7; - button, - [button] { - border-width: 0; - transition: 100ms all linear; - font-size: $segment-button-md-font-size; - opacity: 0.7; + min-height: $segment-button-md-min-height; + line-height: $segment-button-md-line-height; - min-height: $segment-button-md-min-height; - line-height: $segment-button-md-line-height; - - &.activated, &.segment-activated { - color: $segment-button-md-text-color-activated; - background-color: transparent; - border-color: $segment-button-md-border-color-activated; - } - - border-radius: 0; - border-bottom: $segment-button-md-border-bottom; + &.activated, + &.segment-activated { + color: $segment-button-md-text-color-activated; + background-color: transparent; + border-color: $segment-button-md-border-color-activated; } + border-radius: 0; + border-bottom: $segment-button-md-border-bottom; } .toolbar { @@ -42,8 +38,8 @@ ion-segment { ion-segment { margin: 0 auto; - ion-segment-button[button][outline].activated, - ion-segment-button[button][outline].segment-activated { + .segment-button.activated, + .segment-button.segment-activated { background-color: transparent; opacity: 1; } @@ -57,15 +53,13 @@ ion-segment { @mixin segment-button($button-color) { background-color: transparent; - &[outline] { - color: $button-color; + color: $button-color; - &.activated, &.segment-activated { - background-color: transparent; - color: $button-color; - border-color: $button-color; - opacity: 1; - } + &.activated, &.segment-activated { + background-color: transparent; + color: $button-color; + border-color: $button-color; + opacity: 1; } } @@ -78,7 +72,7 @@ ion-segment { .toolbar[#{$color-name}] { ion-segment { - ion-segment-button[button] { + .segment-button { @include segment-button($inverse-color-value); } } @@ -88,7 +82,7 @@ ion-segment { // this will take priority over the default toolbar colors @each $color-name, $color-value in $colors-md { ion-segment[#{$color-name}] { - ion-segment-button[button] { + .segment-button { @include segment-button($color-value); } } @@ -97,7 +91,7 @@ ion-segment { } ion-segment[#{$color-name}] { - ion-segment-button[button] { + .segment-button { @include segment-button($color-value); } diff --git a/ionic/components/segment/segment.scss b/ionic/components/segment/segment.scss index 821d6da4b6..92058a7a08 100644 --- a/ionic/components/segment/segment.scss +++ b/ionic/components/segment/segment.scss @@ -7,33 +7,31 @@ $segment-button-padding: 0 16px !default; ion-segment { - display: flex; align-items: center; justify-content: center; flex: 1; width: 100%; - - button, - [button] { - - margin-left: 0; - margin-right: 0; - - flex: 1; - display: block; - overflow: hidden; - - padding: $segment-button-padding; - width: 0; - - border-width: 1px 0px 1px 1px; - border-radius: 0; - - text-align: center; - text-overflow: ellipsis; - white-space: nowrap; - - background: none; - } +} + +.segment-button { + position: relative; + overflow: hidden; + display: block; + + margin-left: 0; + margin-right: 0; + padding: $segment-button-padding; + + flex: 1; + width: 0; + + border-width: 1px 0px 1px 1px; + border-radius: 0; + + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + + background: none; } diff --git a/ionic/components/segment/segment.ts b/ionic/components/segment/segment.ts index b53c2c4dd3..958cace5aa 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: [ @@ -134,7 +177,7 @@ export class Segment extends Ion { ], host: { '(click)': 'click($event)', - '[class.segment-activated]': 'isActive', + '[class.segment-activated]': 'isActive' } }) export class SegmentButton { @@ -146,8 +189,8 @@ export class SegmentButton { ) { this.segment = segment; - renderer.setElementAttribute(elementRef, 'button', ''); - renderer.setElementAttribute(elementRef, 'outline', ''); + renderer.setElementClass(elementRef, 'segment-button', true); + renderer.setElementAttribute(elementRef, 'tappable', ''); } /** diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss index 6a6f4f2ca8..98424535d1 100644 --- a/ionic/components/toolbar/modes/ios.scss +++ b/ionic/components/toolbar/modes/ios.scss @@ -22,6 +22,9 @@ $toolbar-ios-button-font-size: 1.7rem !default; $toolbar-ios-title-font-size: 1.7rem !default; $navbar-ios-height: $toolbar-ios-height !default; +$bar-button-ios-color: $toolbar-ios-active-color !default; +$bar-button-ios-border-radius: 4px !default; + .toolbar { padding: $toolbar-ios-padding; @@ -90,7 +93,7 @@ ion-title { } -// iOS Toolbar Buttons +// iOS Toolbar Button Placement // -------------------------------------------------- ion-buttons { @@ -113,6 +116,10 @@ ion-buttons[right] { order: map-get($toolbar-order-ios, buttons-right); } + +// iOS Toolbar Button Default +// -------------------------------------------------- + .bar-button { margin-top: 0; margin-bottom: 0; @@ -120,10 +127,101 @@ ion-buttons[right] { min-height: 32px; border: 0; font-size: $toolbar-ios-button-font-size; - color: $toolbar-ios-active-color; - background-color: transparent; + border-radius: $bar-button-ios-border-radius; } +@mixin ios-bar-button-default($color-name, $color-value) { + + .bar-button-#{$color-name} { + $fg-color: color-shade($color-value); + color: $fg-color; + background-color: transparent; + + &:hover:not(.disable-hover) { + color: color-shade($fg-color); + } + + &.activated { + opacity: 0.4; + } + } + +} + + +// iOS Toolbar Button Outline +// -------------------------------------------------- + +.bar-button-outline { + border-width: 1px; + border-style: solid; + border-color: $bar-button-ios-color; + color: $bar-button-ios-color; + background-color: transparent; + + &:hover:not(.disable-hover) { + opacity: 0.4; + } + + &.activated { + color: inverse($bar-button-ios-color); + background-color: $bar-button-ios-color; + } +} + +@mixin ios-bar-button-outline($color-name, $color-value) { + + .bar-button-outline-#{$color-name} { + $fg-color: color-shade($color-value); + border-color: $fg-color; + color: $fg-color; + background-color: transparent; + + &.activated { + color: inverse($fg-color); + background-color: $fg-color; + } + } + +} + + +// iOS Toolbar Button Solid +// -------------------------------------------------- + +.bar-button-solid { + color: inverse($bar-button-ios-color); + background-color: $bar-button-ios-color; + + &:hover:not(.disable-hover) { + opacity: 0.4; + color: inverse($bar-button-ios-color); + } + + &.activated { + opacity: 0.4; + color: inverse($bar-button-ios-color); + background-color: color-shade($bar-button-ios-color); + } +} + +@mixin ios-bar-button-solid($color-name, $color-value) { + + .bar-button-solid-#{$color-name} { + color: inverse($color-value); + background-color: $color-value; + + &.activated { + background-color: color-shade($color-value); + } + } + +} + + +// iOS Toolbar Button Icon +// -------------------------------------------------- + .bar-button-icon-left icon { margin-left: -0.1em; padding-right: 0.3em; @@ -153,7 +251,7 @@ ion-buttons[right] { } -// iOS Toolbar Back Button +// iOS Toolbar Back Button // -------------------------------------------------- .back-button { @@ -176,14 +274,16 @@ ion-buttons[right] { // iOS Toolbar Menu Toggle // -------------------------------------------------- -[menu-toggle] { - order: map-get($toolbar-order-ios, menu-toggle-start); - cursor: pointer; -} +.toolbar { + [menu-toggle] { + order: map-get($toolbar-order-ios, menu-toggle-start); + cursor: pointer; + } -[menu-toggle][end], -[menu-toggle][right] { - order: map-get($toolbar-order-ios, menu-toggle-end); + [menu-toggle][end], + [menu-toggle][right] { + order: map-get($toolbar-order-ios, menu-toggle-end); + } } ion-segment-button[button] { @@ -196,6 +296,11 @@ ion-segment-button[button] { // iOS Toolbar Color Generation // -------------------------------------------------- +@include ios-bar-button-default(default, $bar-button-ios-color); + @each $color-name, $color-value in $colors-ios { @include ios-toolbar-theme($color-name, $color-value); + @include ios-bar-button-default($color-name, $color-value); + @include ios-bar-button-outline($color-name, $color-value); + @include ios-bar-button-solid($color-name, $color-value); } diff --git a/ionic/components/toolbar/modes/md.scss b/ionic/components/toolbar/modes/md.scss index b0056aa62a..8c7f84f239 100644 --- a/ionic/components/toolbar/modes/md.scss +++ b/ionic/components/toolbar/modes/md.scss @@ -22,6 +22,9 @@ $toolbar-md-title-font-size: 2rem !default; $toolbar-md-button-font-size: 1.4rem !default; $navbar-md-height: $toolbar-md-height !default; +$bar-button-md-color: $toolbar-md-active-color !default; +$bar-button-md-border-radius: 2px !default; + .toolbar { padding: $toolbar-md-padding; @@ -74,11 +77,10 @@ ion-title { } -// Material Design Toolbar Buttons +// Material Design Toolbar Button Placement // -------------------------------------------------- ion-buttons { - flex: 1; order: map-get($toolbar-order-md, buttons-start); transform: translateZ(0px); } @@ -102,6 +104,140 @@ ion-buttons[right] { } +// Material Design Toolbar Button Default +// -------------------------------------------------- + +.bar-button { + margin-top: 0; + margin-bottom: 0; + padding: 0 5px; + min-height: 32px; + border: 0; + font-size: $toolbar-md-button-font-size; + border-radius: $bar-button-md-border-radius; +} + +@mixin md-bar-button-default($color-name, $color-value) { + + .bar-button-#{$color-name} { + $fg-color: color-shade($color-value); + color: $fg-color; + background-color: transparent; + + &:hover:not(.disable-hover) { + color: color-shade($fg-color); + } + + &.activated { + opacity: 0.4; + } + } + +} + + +// Material Design Toolbar Button Outline +// -------------------------------------------------- + +.bar-button-outline { + border-width: 1px; + border-style: solid; + border-color: $bar-button-md-color; + color: $bar-button-md-color; + background-color: transparent; + + &:hover:not(.disable-hover) { + opacity: 0.4; + } + + &.activated { + color: inverse($bar-button-md-color); + background-color: $bar-button-md-color; + } +} + +@mixin md-bar-button-outline($color-name, $color-value) { + + .bar-button-outline-#{$color-name} { + $fg-color: color-shade($color-value); + border-color: $fg-color; + color: $fg-color; + background-color: transparent; + + &.activated { + color: inverse($fg-color); + background-color: $fg-color; + } + } + +} + + +// Material Design Toolbar Button Solid +// -------------------------------------------------- + +.bar-button-solid { + color: inverse($bar-button-md-color); + background-color: $bar-button-md-color; + + &:hover:not(.disable-hover) { + opacity: 0.4; + color: inverse($bar-button-md-color); + } + + &.activated { + opacity: 0.4; + color: inverse($bar-button-md-color); + background-color: color-shade($bar-button-md-color); + } +} + +@mixin md-bar-button-solid($color-name, $color-value) { + + .bar-button-solid-#{$color-name} { + color: inverse($color-value); + background-color: $color-value; + + &.activated { + background-color: color-shade($color-value); + } + } + +} + + +// Material Design Toolbar Button Icon +// -------------------------------------------------- + +.bar-button-icon-left icon { + margin-left: -0.1em; + padding-right: 0.3em; + font-size: 1.4em; + line-height: 0.67; + pointer-events: none; +} + +.bar-button-icon-right icon { + margin-right: -0.2em; + padding-left: 0.4em; + font-size: 1.4em; + line-height: 0.67; + pointer-events: none; +} + +.bar-button-icon-only { + padding: 0; + min-width: 0.9em; + + icon { + padding: 0 0.1em; + font-size: 1.8em; + line-height: 0.67; + pointer-events: none; + } +} + + // Material Design Toolbar Back Button // -------------------------------------------------- @@ -144,6 +280,11 @@ ion-buttons[right] { // Material Design Toolbar Color Generation // -------------------------------------------------- +@include md-bar-button-default(default, $bar-button-md-color); + @each $color-name, $color-value in $colors-md { @include md-toolbar-theme($color-name, $color-value); + @include md-bar-button-default($color-name, $color-value); + @include md-bar-button-outline($color-name, $color-value); + @include md-bar-button-solid($color-name, $color-value); } diff --git a/ionic/components/toolbar/test/scenarios/main.html b/ionic/components/toolbar/test/scenarios/main.html index 585b0f5f33..c881c22591 100644 --- a/ionic/components/toolbar/test/scenarios/main.html +++ b/ionic/components/toolbar/test/scenarios/main.html @@ -14,7 +14,7 @@ - @@ -32,7 +32,7 @@ - @@ -40,46 +40,6 @@ - - - - - - Solid - - - - - - - - - - - - Solid Activated - - - - - - + + Solid - - ColorAttr - + + Solid Activated - - ColorAttr.activated 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 @> ---