From 584d7971a85cf69710962c3353b48bd99ea725a7 Mon Sep 17 00:00:00 2001 From: Robert Messerle Date: Tue, 15 Dec 2015 00:44:06 -0800 Subject: [PATCH] adds third demo to homepage --- .../_examples/homepage-tabs/ts/src/bs_tabs.ts | 23 +++++++++++ .../_examples/homepage-tabs/ts/src/di_demo.ts | 17 +++++++++ .../_examples/homepage-tabs/ts/src/index.html | 38 +++++++++++++++++++ public/index.jade | 9 +++++ 4 files changed, 87 insertions(+) create mode 100644 public/docs/_examples/homepage-tabs/ts/src/bs_tabs.ts create mode 100644 public/docs/_examples/homepage-tabs/ts/src/di_demo.ts create mode 100644 public/docs/_examples/homepage-tabs/ts/src/index.html diff --git a/public/docs/_examples/homepage-tabs/ts/src/bs_tabs.ts b/public/docs/_examples/homepage-tabs/ts/src/bs_tabs.ts new file mode 100644 index 0000000000..b755799eb3 --- /dev/null +++ b/public/docs/_examples/homepage-tabs/ts/src/bs_tabs.ts @@ -0,0 +1,23 @@ +// #docregion +import {Component, Directive, Input, QueryList} from 'angular2/core'; + +@Directive({ + selector: '[bsPane]' +}) +export class BsPane { + @Input() title: string; +} + +@Component({ + selector: 'tabs', + template: ` + ` +}) +export class BsTabs { + //@ContentChildren(BsPane) panes: QueryList; +} diff --git a/public/docs/_examples/homepage-tabs/ts/src/di_demo.ts b/public/docs/_examples/homepage-tabs/ts/src/di_demo.ts new file mode 100644 index 0000000000..f1149c6b90 --- /dev/null +++ b/public/docs/_examples/homepage-tabs/ts/src/di_demo.ts @@ -0,0 +1,17 @@ +// #docregion +import {Component} from 'angular2/core'; +import {BsTabs, BsPane} from './bs_tabs'; + +@Component({ + selector: 'di-demo', + template: ` + Demo: + +
+ summary text ... +
+ `, + directives: [BsTabs, BsPane] +}) +export class DiDemo { +} diff --git a/public/docs/_examples/homepage-tabs/ts/src/index.html b/public/docs/_examples/homepage-tabs/ts/src/index.html new file mode 100644 index 0000000000..9875293b30 --- /dev/null +++ b/public/docs/_examples/homepage-tabs/ts/src/index.html @@ -0,0 +1,38 @@ + + + + + + Angular 2 QuickStart + + + + + + + + + + + + + + + + + Loading... + + + \ No newline at end of file diff --git a/public/index.jade b/public/index.jade index d962cb5aa2..45f7a08f69 100644 --- a/public/index.jade +++ b/public/index.jade @@ -31,3 +31,12 @@ div | Try in Plunker +makeTabs('../docs/_fragments/homepage-todo/ts/src/todo_app.ts,../docs/_fragments/homepage-todo/ts/src/todo_form.ts,../docs/_fragments/homepage-todo/ts/src/todo_list.ts,../docs/_fragments/homepage-todo/ts/src/todo.ts,../docs/_fragments/homepage-todo/ts/src/index.html', null, 'todo_app.ts,todo_form.ts,todo_list.ts,todo.ts,index.html') br +div + h3.text-headline Advanced Component Communication + p.text-body This demo shows an efficient implementation of tabs/panes. Each pane is only instantiated while it is visible. Panes which are not visible are released and do not have associated memory, DOM and change detection cost. + p.text-body The demo also showcases dependency injection and the ability of one component to query for other components. Such queries automatically update even as detail panes are added. This allows tobs component to work with ngFor without any special knowledge of it. + p(style='text-align:right') + md-button.md-primary(href='http://plnkr.co/edit/9GdLbXM0mh5zHPKhcwCL?p=preview' target='_blank') + span.icon-open-in-new + | Try in Plunker + +makeTabs('../docs/_fragments/homepage-tabs/ts/src/bs_tabs.ts,../docs/_fragments/homepage-tabs/ts/src/di_demo.ts,../docs/_fragments/homepage-tabs/ts/src/index.html', null, 'bs_tabs.ts,di_demo.ts,index.html')