cargdev/angular
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

build(aio): change examples to CLI (#19248)

Browse Source 
PR Close #19248
This commit is contained in:
Jesus Rodriguez
2017-08-22 21:31:15 +02:00
committed by Igor Minar
parent 344a5ca545
commit 9bbf009dff
377 changed files with 2339 additions and 1748 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
aio/content/examples/animations/src/app/hero-list-auto.component.ts
View File

@ -13,7 +13,7 @@ import {
import { Hero } from './hero.service';
@Component({
selector: 'hero-list-auto',
selector: 'app-hero-list-auto',
// #docregion template
template: `
<ul>

2
aio/content/examples/animations/src/app/hero-list-basic.component.ts
View File

@ -17,7 +17,7 @@ import {
import { Hero } from './hero.service';
@Component({
selector: 'hero-list-basic',
selector: 'app-hero-list-basic',
// #enddocregion
/* The click event calls hero.toggleState(), which
* causes the state of that hero to switch from

2
aio/content/examples/animations/src/app/hero-list-combined-transitions.component.ts
View File

@ -16,7 +16,7 @@ import {
import { Hero } from './hero.service';
@Component({
selector: 'hero-list-combined-transitions',
selector: 'app-hero-list-combined-transitions',
// #docregion template
template: `
<ul>

2
aio/content/examples/animations/src/app/hero-list-enter-leave-states.component.ts
View File

@ -13,7 +13,7 @@ import {
import { Hero } from './hero.service';
@Component({
selector: 'hero-list-enter-leave-states',
selector: 'app-hero-list-enter-leave-states',
// #docregion template
template: `
<ul>

2
aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts
View File

@ -13,7 +13,7 @@ import {
import { Hero } from './hero.service';
@Component({
selector: 'hero-list-enter-leave',
selector: 'app-hero-list-enter-leave',
// #docregion template
template: `
<ul>

2
aio/content/examples/animations/src/app/hero-list-groups.component.ts
View File

@ -14,7 +14,7 @@ import {
import { Hero } from './hero.service';
@Component({
selector: 'hero-list-groups',
selector: 'app-hero-list-groups',
template: `
<ul>
<li *ngFor="let hero of heroes"

2
aio/content/examples/animations/src/app/hero-list-inline-styles.component.ts
View File

@ -15,7 +15,7 @@ import {
import { Hero } from './hero.service';
@Component({
selector: 'hero-list-inline-styles',
selector: 'app-hero-list-inline-styles',
// #docregion template
template: `
<ul>

2
aio/content/examples/animations/src/app/hero-list-multistep.component.ts
View File

@ -15,7 +15,7 @@ import {
import { Hero } from './hero.service';
@Component({
selector: 'hero-list-multistep',
selector: 'app-hero-list-multistep',
// #docregion template
template: `
<ul>

2
aio/content/examples/animations/src/app/hero-list-timings.component.ts
View File

@ -13,7 +13,7 @@ import {
import { Hero } from './hero.service';
@Component({
selector: 'hero-list-timings',
selector: 'app-hero-list-timings',
template: `
<ul>
<li *ngFor="let hero of heroes"

2
aio/content/examples/animations/src/app/hero-list-twoway.component.ts
View File

@ -16,7 +16,7 @@ import {
import { Hero } from './hero.service';
@Component({
selector: 'hero-list-twoway',
selector: 'app-hero-list-twoway',
// #docregion template
template: `
<ul>

24
aio/content/examples/animations/src/app/hero-team-builder.component.ts
View File

@ -3,7 +3,7 @@ import { Component } from '@angular/core';
import { Hero, HeroService } from './hero.service';
@Component({
selector: 'hero-team-builder',
selector: 'app-root',
template: `
<div class="buttons">
<button [disabled]="!heroService.canAdd()" (click)="heroService.addInactive()">Add inactive hero</button>
@ -15,27 +15,27 @@ import { Hero, HeroService } from './hero.service';
<div class="column">
<h4>Basic State</h4>
<p>Switch between active/inactive on click.</p>
<hero-list-basic [heroes]="heroes"></hero-list-basic>
<app-hero-list-basic [heroes]="heroes"></app-hero-list-basic>
</div>
<div class="column">
<h4>Styles inline in transitions</h4>
<p>Animated effect on click, no persistent end styles.</p>
<hero-list-inline-styles [heroes]="heroes"></hero-list-inline-styles>
<p>Animated effect on click, no persistend end styles.</p>
<app-hero-list-inline-styles [heroes]="heroes"></app-hero-list-inline-styles>
</div>
<div class="column">
<h4>Combined transition syntax</h4>
<p>Switch between active/inactive on click. Define just one transition used in both directions.</p>
<hero-list-combined-transitions [heroes]="heroes"></hero-list-combined-transitions>
<app-hero-list-combined-transitions [heroes]="heroes"></app-hero-list-combined-transitions>
</div>
<div class="column">
<h4>Two-way transition syntax</h4>
<p>Switch between active/inactive on click. Define just one transition used in both directions using the <=> syntax.</p>
<hero-list-twoway [heroes]="heroes"></hero-list-twoway>
<app-hero-list-twoway [heroes]="heroes"></app-hero-list-twoway>
</div>
<div class="column">
<h4>Enter & Leave</h4>
<p>Enter and leave animations using the void state.</p>
<hero-list-enter-leave [heroes]="heroes"></hero-list-enter-leave>
<app-hero-list-enter-leave [heroes]="heroes"></app-hero-list-enter-leave>
</div>
</div>
<div class="columns">
@ -45,27 +45,27 @@ import { Hero, HeroService } from './hero.service';
Enter and leave animations combined with active/inactive state animations.
Different enter and leave transitions depending on state.
</p>
<hero-list-enter-leave-states [heroes]="heroes"></hero-list-enter-leave-states>
<app-hero-list-enter-leave-states [heroes]="heroes"></app-hero-list-enter-leave-states>
</div>
<div class="column">
<h4>Auto Style Calc</h4>
<p>Leave animation from the current computed height using the auto-style value *.</p>
<hero-list-auto [heroes]="heroes"></hero-list-auto>
<app-hero-list-auto [heroes]="heroes"></app-hero-list-auto>
</div>
<div class="column">
<h4>Different Timings</h4>
<p>Enter and leave animations with different easings, ease-in for enter, ease-out for leave.</p>
<hero-list-timings [heroes]="heroes"></hero-list-timings>
<app-hero-list-timings [heroes]="heroes"></app-hero-list-timings>
</div>
<div class="column">
<h4>Multiple Keyframes</h4>
<p>Enter and leave animations with three keyframes in each, to give the transition some bounce.</p>
<hero-list-multistep [heroes]="heroes"></hero-list-multistep>
<app-hero-list-multistep [heroes]="heroes"></app-hero-list-multistep>
</div>
<div class="column">
<h4>Parallel Groups</h4>
<p>Enter and leave animations with multiple properties animated in parallel with different timings.</p>
<hero-list-groups [heroes]="heroes"></hero-list-groups>
<app-hero-list-groups [heroes]="heroes"></app-hero-list-groups>
</div>
</div>
`,