docs(chips): updated demos with better examples (#395)

* demo/code added for docs * removed unused vars & modified html * removed param which is not required for the block * chore(): updated demos in chips
Teradata · Mar 2, 2017 · 1561ff8 · 1561ff8
1 parent b060c78
commit 1561ff8
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 10 deletions.
diff --git a/src/app/components/components/chips/chips.component.html b/src/app/components/components/chips/chips.component.html
@@ -3,12 +3,120 @@
   <md-card-subtitle>Small blocks for multiple items</md-card-subtitle>
   <md-divider></md-divider>
   <md-card-content>
-    <p>Basic Demo</p>
-    <td-chips placeholder="Enter any string" [readOnly]="readOnly"></td-chips>
-    <p>Autocomplete Demo</p>
-    <td-chips [items]="items" placeholder="Enter any string" [readOnly]="readOnly"></td-chips>
-    <p>Autocomplete and requireMatch Demo</p>
-    <td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>      
+    <h3 class="md-title">Basic Demo</h3>
+    <md-tab-group md-stretch-tabs>
+      <md-tab>
+        <template md-tab-label>Demo</template>
+        <td-chips placeholder="Enter any string"></td-chips>
+      </md-tab>
+      <md-tab>
+        <template md-tab-label>Code</template>
+        <p>HTML:</p>
+        <td-highlight lang="html">
+          <![CDATA[
+            <td-chips placeholder="Enter any string"></td-chips>
+          ]]>
+        </td-highlight>
+        <p>Typescript:</p>
+        <td-highlight lang="typescript">
+          <![CDATA[
+            export class ChipsDemoComponent {
+
+            }
+          ]]>
+        </td-highlight>
+      </md-tab>
+    </md-tab-group>
+  </md-card-content>
+</md-card>
+<md-card>
+  <md-card-content>
+    <h3 class="md-title">Autocomplete Demo</h3>
+    <md-tab-group md-stretch-tabs>
+      <md-tab>
+        <template md-tab-label>Demo</template>
+        <td-chips [items]="items" placeholder="Enter any string"></td-chips>
+      </md-tab>
+      <md-tab>
+        <template md-tab-label>Code</template>
+        <p>HTML:</p>
+        <td-highlight lang="html">
+          <![CDATA[
+            <td-chips [items]="items" placeholder="Enter any string"></td-chips>
+          ]]>
+        </td-highlight>
+        <p>Typescript:</p>
+        <td-highlight lang="typescript">
+          <![CDATA[
+            export class ChipsDemoComponent {
+
+              items: string[] = [
+                'stepper',
+                'expansion-panel',
+                'markdown',
+                'highlight',
+                'loading',
+                'media',
+                'chips',
+                'http',
+                'json-formatter',
+                'pipes',
+                'need more?',
+              ];
+
+            }
+          ]]>
+        </td-highlight>
+      </md-tab>
+    </md-tab-group>
+  </md-card-content>
+</md-card>
+<md-card>
+  <md-card-content>
+    <h3 class="md-title">Autocomplete and requireMatch Demo</h3>
+    <md-tab-group md-stretch-tabs>
+      <md-tab>
+        <template md-tab-label>Demo</template>
+        <td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>
+      </md-tab>
+      <md-tab>
+        <template md-tab-label>Code</template>
+        <p>HTML:</p>
+        <td-highlight lang="html">
+          <![CDATA[
+            <td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>
+          ]]>
+        </td-highlight>
+        <p>Typescript:</p>
+        <td-highlight lang="typescript">
+          <![CDATA[
+            export class ChipsDemoComponent {
+              readOnly: boolean = false;
+
+              items: string[] = [
+                'stepper',
+                'expansion-panel',
+                'markdown',
+                'highlight',
+                'loading',
+                'media',
+                'chips',
+                'http',
+                'json-formatter',
+                'pipes',
+                'need more?',
+              ];
+
+              itemsRequireMatch: string[] = this.items.slice(0, 6);
+
+              toggleReadOnly(): void {
+                this.readOnly = !this.readOnly;
+              }
+            }
+          ]]>
+        </td-highlight>
+      </md-tab>
+    </md-tab-group>
   </md-card-content>
   <md-divider></md-divider>
   <md-card-actions>

diff --git a/src/app/components/components/chips/chips.component.ts b/src/app/components/components/chips/chips.component.ts
@@ -60,10 +60,6 @@ export class ChipsDemoComponent {
 
   itemsRequireMatch: string[] = this.items.slice(0, 6);
 
-  itemsReadOnly: string[] = this.items.slice(2, 8);
-
-  itemsForms: string[] = this.items.slice(6, 11);
-
   toggleReadOnly(): void {
     this.readOnly = !this.readOnly;
   }