docs(tree): add cdk trees examples in demo app (angular#10408)

Author: tinayuangao

src/demo-app/tree/dynamic-tree-demo/dynamic-tree-demo.scss

@@ -1,15 +0,0 @@
-.demo-tree-container {
-  .tree-demo-invisible {
-    display: none;
-  }
-
-  ul, li {
-    -webkit-margin-before: 0;
-    -webkit-margin-after: 0;
-    list-style-type: none;
-  }
-
-  .mat-card {
-    margin: 16px;
-  }
-}

src/demo-app/tree/file-database.ts

@@ -29,7 +29,7 @@ export class FileFlatNode {
 /**
  * The file structure tree data in string. The data could be parsed into a Json object
  */
-const TREE_DATA = `{"Tina":
+const TREE_DATA = `
   {
     "Documents": {
       "angular": {
@@ -64,7 +64,7 @@ const TREE_DATA = `{"Tina":
         "Calendar": "app",
         "Webstorm": "app"
     }
-}}`;
+}`;
 
 /**
  * File database, it can build a tree structured Json object from string.

src/demo-app/tree/tree-demo-module.ts

@@ -11,7 +11,7 @@ import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {
   MatButtonModule,
-  MatCardModule,
+  MatExpansionModule,
   MatCheckboxModule,
   MatFormFieldModule,
   MatIconModule,
@@ -29,7 +29,7 @@ import {LoadmoreTreeDemo} from './loadmore-tree-demo/loadmore-tree-demo';
     CommonModule,
     FormsModule,
     MatButtonModule,
-    MatCardModule,
+    MatExpansionModule,
     MatCheckboxModule,
     MatFormFieldModule,
     MatIconModule,

src/demo-app/tree/tree-demo.html

@@ -1,37 +1,33 @@
-<div class="demo-tree-container">
-  <mat-card>
-    <mat-card-header>Flattened tree</mat-card-header>
 
+
+<mat-accordion class="demo-tree-container">
+
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>Flattened tree</mat-expansion-panel-header>
     <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
       <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
-          {{node.filename}} : {{node.type}}
+        {{node.filename}} : {{node.type}}
       </mat-tree-node>
-
       <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
-          <button mat-icon-button matTreeNodeToggle
-                  [attr.aria-label]="'toggle ' + node.filename">
-            <mat-icon>
-              {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
-            </mat-icon>
-          </button>
-          {{node.filename}} : {{node.type}}
+        <button mat-icon-button matTreeNodeToggle
+                [attr.aria-label]="'toggle ' + node.filename">
+          <mat-icon>
+            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+          </mat-icon>
+        </button>
+        {{node.filename}} : {{node.type}}
       </mat-tree-node>
     </mat-tree>
+  </mat-expansion-panel>
 
-  </mat-card>
-
-
-
-  <mat-card>
-    <mat-card-header>Nested tree</mat-card-header>
-
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>Nested tree</mat-expansion-panel-header>
     <mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
       <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
         <li>
           <div>{{node.filename}}:  {{node.type}}</div>
         </li>
       </mat-tree-node>
-
       <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
         <li>
           <div class="mat-tree-node">
@@ -49,21 +45,49 @@
         </li>
       </mat-nested-tree-node>
     </mat-tree>
-  </mat-card>
+  </mat-expansion-panel>
+
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>CDK Flattened tree</mat-expansion-panel-header>
+    <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
+      <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="demo-tree-node">
+        <a [attr.aria-label]="'toggle ' + node.filename" cdkTreeNodeToggle class="demo-tree-toggle">
+          {{treeControl.isExpanded(node) ? '-' : '+'}}
+        </a>
+        {{node.filename}}:  {{node.type}}
+      </cdk-tree-node>
+    </cdk-tree>
+  </mat-expansion-panel>
 
-  <mat-card>
-    <mat-card-header>Todo list Flattened tree</mat-card-header>
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>CDK Nested tree</mat-expansion-panel-header>
+    <cdk-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
+      <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="demo-tree-node">
+        <a [attr.aria-label]="'toggle ' + node.filename" cdkTreeNodeToggle class="demo-tree-toggle">
+          {{nestedTreeControl.isExpanded(node) ? '-' : '+'}}
+        </a>
+        {{node.filename}}:  {{node.type}}
+        <div [class.tree-demo-invisible]="!nestedTreeControl.isExpanded(node)" class="demo-tree-nested-node">
+          <ng-container cdkTreeNodeOutlet></ng-container>
+        </div>
+      </cdk-nested-tree-node>
+    </cdk-tree>
+  </mat-expansion-panel>
+
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>Todo list Flattened tree</mat-expansion-panel-header>
     <checklist-tree-demo></checklist-tree-demo>
-  </mat-card>
+  </mat-expansion-panel>
 
-  <mat-card>
-    <mat-card-header>Dynamic flat tree</mat-card-header>
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>Dynamic flat tree</mat-expansion-panel-header>
     <dynamic-tree-demo></dynamic-tree-demo>
-  </mat-card>
+  </mat-expansion-panel>
 
-  <mat-card>
-    <mat-card-header>Loadmore flat tree</mat-card-header>
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>Loadmore flat tree</mat-expansion-panel-header>
     <loadmore-tree-demo></loadmore-tree-demo>
-  </mat-card>
+  </mat-expansion-panel>
+
 
-</div>
+</mat-accordion>

src/demo-app/tree/tree-demo.scss

@@ -1,4 +1,17 @@
 .demo-tree-container {
+  .demo-tree-node {
+    display: block;
+  }
+
+  .demo-tree-toggle {
+    font-size: 24px;
+    padding-right: 4px;
+  }
+
+  .demo-tree-nested-node {
+    padding-left: 20px;
+  }
+
   .tree-demo-invisible {
     display: none;
   }