Skip to content

Commit

Permalink
feature(stepper): remove [td-step-content] & add [td-step-label] (#145)
Browse files Browse the repository at this point in the history 
* upgrade angular to 2.1.2

* fixed empty input since angular complains now angular/angular#12768

* update module dependencies

* update to latest angular-cli

* upgrade to alpha.10 and breaking changes

* remove [td-step-content]template and makes step content anything inside (except actions/summary templates)

* update docs removing td-step-content template and fix layout steppers

* support for label template or [label] input in td-step

* make sublabel ready for template support in td-step-header

* remove extra `>`
  • Loading branch information
@emoralesb05 @kyleledbetter
emoralesb05 authored and kyleledbetter committed Nov 18, 2016
1 parent bb2b7f6 commit 5d87249
Show file tree
Hide file tree
Showing 11 changed files with 360 additions and 383 deletions.
18 changes: 7 additions & 11 deletions src/app/components/components/steps/steps.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,23 +15,18 @@
<h3>{{horizontal ? 'Horizontal Mode' : 'Vertical Mode'}}</h3>
<td-steps (stepChange)="stepChange($event)" [mode]="horizontal ? 'horizontal' : 'vertical'">
<td-step #step1 label="Basic Usage" sublabel="Toggle between active and inactive and emit events." [active]="true" [disabled]="disabled" (activated)="activeStep1Event()" (deactivated)="deactiveStep1Event()">
<template td-step-content>
Include any content you like for an active stepper
</template>
<template td-step-label><span>Basic Usage (template)</span></template>
Include any content you like for an active stepper
</td-step>
<td-step #step2 label="Required State" sublabel="Toggle between active and inactive while in required state." [state]="stateStep2" [disabled]="disabled">
<template td-step-content>
This step is required!
</template>
This step is required!
<template td-step-actions>
<button md-raised-button color="primary" (click)="toggleRequiredStep2()">Toggle Require</button>
<button md-button (click)="step2.active = false">Cancel</button>
</template>
</td-step>
<td-step #step3 label="Complete State" sublabel="Toggle between active and inactive while in complete state." [state]="stateStep3" [disabled]="disabled">
<template td-step-content>
Mark this step complete and get a summary
</template>
Mark this step complete and get a summary
<template td-step-summary>
Use an optional step summary to summarize the info in this step
</template>
Expand Down Expand Up @@ -135,9 +130,10 @@ <h3>Example:</h3>
<td-highlight lang="html">
<![CDATA[
<td-step #step label="Label" sublabel="Sublabel" [active]="active" [disabled]="disabled" [state]="state" (activated)="activeEvent()" (deactivated)="deactiveEvent()">
<template td-step-content>
... add content that will be shown when the step is "active"
<template td-step-label>
... add label content (if not used, falls back to [label] input)
</template>
... add content that will be shown when the step is "active"
<template td-step-actions>
<button (click)="step.close()">Close</button>
... add button elements for the step content (optional)
Expand Down
174 changes: 83 additions & 91 deletions src/app/components/layouts/card-over/card-over.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,103 +8,95 @@
<div flex-gt-md="45">
<td-steps>
<td-step [active]="true" label="Step 1: td-layout" sublabel="td-layout is the wrapper component">
<template td-step-content>
<md-list>
<md-list-item>
<h3 md-line><code><![CDATA[<td-layout>]]></code></h3>
<p md-line>The wrapper of your entire layout</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>#layout</code></h3>
<p md-line>The ID and local reference of your sidenav</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>sidenavTitle?: string</code></h3>
<p md-line>The title of your sidenav</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>logo?: string</code></h3>
<p md-line>The path to your sidenav logo</p>
</md-list-item>
<md-divider></md-divider>
</md-list>
</template>
<md-list>
<md-list-item>
<h3 md-line><code><![CDATA[<td-layout>]]></code></h3>
<p md-line>The wrapper of your entire layout</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>#layout</code></h3>
<p md-line>The ID and local reference of your sidenav</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>sidenavTitle?: string</code></h3>
<p md-line>The title of your sidenav</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>logo?: string</code></h3>
<p md-line>The path to your sidenav logo</p>
</md-list-item>
<md-divider></md-divider>
</md-list>
</td-step>
<td-step label="Step 2: menu-items" sublabel="the sidenav menu items">
<template td-step-content>
<md-list>
<md-list-item>
<h3 md-line><code><![CDATA[<md-nav-list menu-items>]]></code></h3>
<p md-line>The menu items wrapper</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code><![CDATA[<a md-list-item>]]></code></h3>
<p md-line>Loops over the routes from your Class</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code><![CDATA[<md-icon>]]></code></h3>
<p md-line>The SVG or font icon</p>
</md-list-item>
<md-divider></md-divider>
</md-list>
</template>
<md-list>
<md-list-item>
<h3 md-line><code><![CDATA[<md-nav-list menu-items>]]></code></h3>
<p md-line>The menu items wrapper</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code><![CDATA[<a md-list-item>]]></code></h3>
<p md-line>Loops over the routes from your Class</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code><![CDATA[<md-icon>]]></code></h3>
<p md-line>The SVG or font icon</p>
</md-list-item>
<md-divider></md-divider>
</md-list>
</td-step>
<td-step label="Step 3: td-layout-nav" sublabel="the content wrapper of the layout">
<template td-step-content>
<md-list>
<md-list-item>
<h3 md-line><code><![CDATA[<td-layout-nav>]]></code></h3>
<p md-line>Builds the top toolbar and content area</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>toolbarTitle?: string</code></h3>
<p md-line>The title of your toolbar</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>logo?: string</code></h3>
<p md-line>The path to your toolbar logo</p>
</md-list-item>
<md-divider></md-divider>
</md-list>
</template>
<md-list>
<md-list-item>
<h3 md-line><code><![CDATA[<td-layout-nav>]]></code></h3>
<p md-line>Builds the top toolbar and content area</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>toolbarTitle?: string</code></h3>
<p md-line>The title of your toolbar</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>logo?: string</code></h3>
<p md-line>The path to your toolbar logo</p>
</md-list-item>
<md-divider></md-divider>
</md-list>
</td-step>
<td-step label="Step 4: td-layout-card-over" sublabel="the main card content area">
<template td-step-content>
<md-list>
<md-list-item>
<h3 md-line><code><![CDATA[<td-layout-card-over>]]></code></h3>
<p md-line>Builds the card and content area</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>cardTitle?: string</code></h3>
<p md-line>The card title</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>cardSubtitle?: string</code></h3>
<p md-line>The card subtitle</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>cardWidth?: number</code></h3>
<p md-line>The card width percentage (default 70)</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
<p md-line>Loads html for each route (view)</p>
</md-list-item>
<md-divider></md-divider>
</md-list>
</template>
<md-list>
<md-list-item>
<h3 md-line><code><![CDATA[<td-layout-card-over>]]></code></h3>
<p md-line>Builds the card and content area</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>cardTitle?: string</code></h3>
<p md-line>The card title</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>cardSubtitle?: string</code></h3>
<p md-line>The card subtitle</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>cardWidth?: number</code></h3>
<p md-line>The card width percentage (default 70)</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
<p md-line>Loads html for each route (view)</p>
</md-list-item>
<md-divider></md-divider>
</md-list>
</td-step>
</td-steps>
</div>
Expand Down
Loading

0 comments on commit 5d87249

Please sign in to comment.