feat(navlist): syntactic sugar for simple nav lists

angular · Apr 19, 2016 · c21c336 · c21c336
1 parent e7611ce
commit c21c336
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 17 deletions.
diff --git a/src/components/list/list.scss b/src/components/list/list.scss
@@ -138,7 +138,7 @@ md-list, md-nav-list  {
   }
 
 
-  md-list-item {
+  md-list-item, a[md-list-item] {
     @include md-list-item-base(
       $md-list-font-size,
       $md-list-base-height,
@@ -164,7 +164,7 @@ md-list[dense], md-nav-list[dense] {
     );
   }
 
-  md-list-item {
+  md-list-item, a[md-list-item] {
     @include md-list-item-base(
       $md-dense-font-size,
       $md-dense-base-height,

diff --git a/src/components/list/list.ts b/src/components/list/list.ts
@@ -19,7 +19,7 @@ export class MdLine {}
 export class MdListAvatar {}
 
 @Component({
-  selector: 'md-list-item',
+  selector: 'md-list-item, a[md-list-item]',
   host: {'role': 'listitem'},
   templateUrl: './components/list/list-item.html',
   encapsulation: ViewEncapsulation.None

diff --git a/src/demo-app/demo-app.html b/src/demo-app/demo-app.html
@@ -1,20 +1,20 @@
 <md-sidenav-layout>
   <md-sidenav #start>
     <md-nav-list>
-      <md-list-item><a md-line [routerLink]="['ButtonDemo']">Button</a></md-list-item>
-      <md-list-item><a md-line [routerLink]="['CardDemo']">Card</a></md-list-item>
-      <md-list-item><a md-line [routerLink]="['ProgressCircleDemo']">Progress Circle</a></md-list-item>
-      <md-list-item><a md-line [routerLink]="['ProgressBarDemo']">Progress Bar</a></md-list-item>
-      <md-list-item><a md-line [routerLink]="['PortalDemo']">Portal</a></md-list-item>
-      <md-list-item><a md-line [routerLink]="['OverlayDemo']">Overlay</a></md-list-item>
-      <md-list-item><a md-line [routerLink]="['CheckboxDemo']">Checkbox</a></md-list-item>
-      <md-list-item><a md-line [routerLink]="['InputDemo']">Input</a></md-list-item>
-      <md-list-item><a md-line [routerLink]="['ToolbarDemo']">Toolbar</a></md-list-item>
-      <md-list-item><a md-line [routerLink]="['RadioDemo']">Radio</a></md-list-item>
-      <md-list-item><a md-line [routerLink]="['ListDemo']">List</a></md-list-item>
-      <md-list-item><a md-line [routerLink]="['LiveAnnouncerDemo']">Live Announcer</a></md-list-item>
-      <md-list-item><a md-line [routerLink]="['SidenavDemo']">Sidenav</a></md-list-item>
-      <md-list-item><a md-line [routerLink]="['GesturesDemo']">Gestures</a></md-list-item>
+      <a md-list-item [routerLink]="['ButtonDemo']">Button</a>
+      <a md-list-item [routerLink]="['CardDemo']">Card</a>
+      <a md-list-item [routerLink]="['ProgressCircleDemo']">Progress Circle</a>
+      <a md-list-item [routerLink]="['ProgressBarDemo']">Progress Bar</a>
+      <a md-list-item [routerLink]="['PortalDemo']">Portal</a>
+      <a md-list-item [routerLink]="['OverlayDemo']">Overlay</a>
+      <a md-list-item [routerLink]="['CheckboxDemo']">Checkbox</a>
+      <a md-list-item [routerLink]="['InputDemo']">Input</a>
+      <a md-list-item [routerLink]="['ToolbarDemo']">Toolbar</a>
+      <a md-list-item [routerLink]="['RadioDemo']">Radio</a>
+      <a md-list-item [routerLink]="['ListDemo']">List</a>
+      <a md-list-item [routerLink]="['LiveAnnouncerDemo']">Live Announcer</a>
+      <a md-list-item [routerLink]="['SidenavDemo']">Sidenav</a>
+      <a md-list-item [routerLink]="['GesturesDemo']">Gestures</a>
     </md-nav-list>
     <button md-raised-button (click)="start.close()">CLOSE</button>
   </md-sidenav>

diff --git a/src/demo-app/list/list-demo.html b/src/demo-app/list/list-demo.html
@@ -50,6 +50,11 @@ <h4 md-line>{{message.from}}</h4>
         </button>
       </md-list-item>
     </md-nav-list>
+    <md-nav-list>
+      <a md-list-item *ngFor="#link of links" href="http://www.google.com">
+        {{ link.name }}
+      </a>
+    </md-nav-list>
   </div>
 
   <div>
@@ -85,5 +90,10 @@ <h4 md-line>{{message.from}}</h4>
         </button>
       </md-list-item>
     </md-nav-list>
+    <md-nav-list dense>
+      <a md-list-item *ngFor="#link of links" href="http://www.google.com">
+        {{ link.name }}
+      </a>
+    </md-nav-list>
   </div>
 </div>