New example for side navigation is added

src/app/examples/example-module.ts

@@ -54,6 +54,7 @@ import {
 } from './slide-toggle-configurable/slide-toggle-configurable-example';
 import {IconSvgExample} from './icon-svg-example/icon-svg-example';
 import {SidenavFabExample} from './sidenav-fab/sidenav-fab-example';
+import {SidenavNavigationListExample} from './sidenav-navigation-list/sidenav-navigation-list-example';
 import {CardOverviewExample} from './card-overview/card-overview-example';
 import {
  ProgressSpinnerOverviewExample
@@ -135,6 +136,7 @@ export const EXAMPLE_COMPONENTS = {
  'select-overview': {title: 'Basic select', component: SelectOverviewExample},
  'select-form': {title: 'Select in a form', component: SelectFormExample},
  'sidenav-fab': {title: 'Sidenav with a FAB', component: SidenavFabExample},
+ 'sidenav-navigation-list':{title: 'Sidenav with Navigation List',component:SidenavNavigationListExample},
  'sidenav-overview': {title: 'Basic sidenav', component: SidenavOverviewExample},
  'slider-configurable': {title: 'Configurable slider', component: SliderConfigurableExample},
  'slider-overview': {title: 'Basic slider', component: SliderOverviewExample},
@@ -193,6 +195,7 @@ export const EXAMPLE_LIST = [
  RadioNgModelExample,
  RadioOverviewExample,
  SidenavFabExample,
+ SidenavNavigationListExample,
  SelectOverviewExample,
  SelectFormExample,
  SidenavOverviewExample,

src/app/examples/sidenav-navigation-list/sidenav-navigation-list-example.css

@@ -0,0 +1,22 @@
+.example-sidenav-navigation-list-container {
+ width: 500px;
+ height: 300px;
+ border: 1px solid rgba(0, 0, 0, 0.5);
+}
+
+.example-sidenav-navigation-list-container md-sidenav {
+ max-width: 200px;
+}
+
+.example-sidenav-navigation-list-container .mat-sidenav-content,
+.example-sidenav-navigation-list-container md-sidenav {
+ display: flex;
+ overflow: visible;
+}
+
+.example-scrolling-content {
+ overflow: auto;
+ padding:5px;
+}
+
+

src/app/examples/sidenav-navigation-list/sidenav-navigation-list-example.html

@@ -0,0 +1,21 @@
+<md-sidenav-container class="example-sidenav-navigation-list-container">
+ <md-sidenav #sidenav mode="side" opened="true">
+ <md-toolbar color="primary">Title for the app</md-toolbar>
+ <md-nav-list>
+ <md-list-item *ngFor="let link of links">
+ <a md-line>{{ link.name }}</a>
+
+ </md-list-item>
+ </md-nav-list>
+ </md-sidenav>
+
+ <div class="example-scrolling-content">
+ <p>
+ Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, fusce vel in pellentesque. Nisl rutrum
+ etiam morbi consectetuer tempor magna, aenean nullam nunc id, neque vivamus interdum sociis nulla scelerisque sem, dolor
+ id wisi turpis magna aliquam magna.</p>
+ <button md-raised-button color="primary" (click)="sidenav.toggle()">
+ Sidenav Toggle
+ </button>
+ </div>
+</md-sidenav-container>

src/app/examples/sidenav-navigation-list/sidenav-navigation-list-example.ts

@@ -0,0 +1,29 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+
+@Component({
+ selector: 'sidenav-navigation-list-example',
+ templateUrl: './sidenav-navigation-list-example.html',
+ styleUrls: ['./sidenav-navigation-list-example.css'],
+ encapsulation: ViewEncapsulation.None,
+})
+export class SidenavNavigationListExample {
+ links = [
+ {
+ 'name':'Google',
+ 'url' : '/components/component/sidenav'
+ },
+ {
+ 'name':'Wikipedia',
+ 'url' : '/components/component/sidenav'
+ },
+ {
+ 'name':'Github',
+ 'url' : '/components/component/sidenav'
+ },
+ {
+ 'name':'Facebook',
+ 'url' : '/components/component/sidenav'
+ }
+ ]
+}

src/app/shared/documentation-items/documentation-items.ts

@@ -33,7 +33,7 @@ const DOCS = [
  summary: 'Sidenavs, toolbars, menus',
  items: [
  {id: 'menu', name: 'Menu', examples: ['menu-icons']},
- {id: 'sidenav', name: 'Sidenav', examples: ['sidenav-fab']},
+ {id: 'sidenav', name: 'Sidenav', examples: ['sidenav-fab','sidenav-navigation-list']},
  {id: 'toolbar', name: 'Toolbar', examples: ['toolbar-multirow']},
  ]
  },

src/assets/examples/sidenav-navigation-list-example-css.html

@@ -0,0 +1,22 @@
+<span class="hljs-selector-class">.example-sidenav-navigation-list-container</span> {
+ <span class="hljs-attribute">width</span>: <span class="hljs-number">500px</span>;
+ <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>;
+ <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-built_in">rgba</span>(0, 0, 0, 0.5);
+}
+
+<span class="hljs-selector-class">.example-sidenav-navigation-list-container</span> <span class="hljs-selector-tag">md-sidenav</span> {
+ <span class="hljs-attribute">max-width</span>: <span class="hljs-number">200px</span>;
+}
+
+<span class="hljs-selector-class">.example-sidenav-navigation-list-container</span> <span class="hljs-selector-class">.mat-sidenav-content</span>,
+<span class="hljs-selector-class">.example-sidenav-navigation-list-container</span> <span class="hljs-selector-tag">md-sidenav</span> {
+ <span class="hljs-attribute">display</span>: flex;
+ <span class="hljs-attribute">overflow</span>: visible;
+}
+
+<span class="hljs-selector-class">.example-scrolling-content</span> {
+ <span class="hljs-attribute">overflow</span>: auto;
+ <span class="hljs-attribute">padding</span>:<span class="hljs-number">5px</span>;
+}
+
+

src/assets/examples/sidenav-navigation-list-example-html.html

@@ -0,0 +1,21 @@
+<span class="hljs-tag">&lt;<span class="hljs-name">md-sidenav-container</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"example-sidenav-navigation-list-container"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">md-sidenav</span> #<span class="hljs-attr">sidenav</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">"side"</span> <span class="hljs-attr">opened</span>=<span class="hljs-string">"true"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">md-toolbar</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"primary"</span>&gt;</span>Title for the app<span class="hljs-tag">&lt;/<span class="hljs-name">md-toolbar</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">md-nav-list</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">md-list-item</span> *<span class="hljs-attr">ngFor</span>=<span class="hljs-string">"let link of links"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">md-line</span>&gt;</span>{{ link.name }}<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+
+ <span class="hljs-tag">&lt;/<span class="hljs-name">md-list-item</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">md-nav-list</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">md-sidenav</span>&gt;</span>
+
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"example-scrolling-content"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
+ Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, fusce vel in pellentesque. Nisl rutrum
+ etiam morbi consectetuer tempor magna, aenean nullam nunc id, neque vivamus interdum sociis nulla scelerisque sem, dolor
+ id wisi turpis magna aliquam magna.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">md-raised-button</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"primary"</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">"sidenav.toggle()"</span>&gt;</span>
+ Sidenav Toggle
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">md-sidenav-container</span>&gt;</span>

src/assets/examples/sidenav-navigation-list-example-ts.html

@@ -0,0 +1,29 @@
+<span class="hljs-keyword">import</span> {Component, ViewEncapsulation} from <span class="hljs-string">'@angular/core'</span>;
+
+
+<span class="hljs-meta">@Component</span>({
+ selector: <span class="hljs-string">'sidenav-navigation-list-example'</span>,
+ templateUrl: <span class="hljs-string">'./sidenav-navigation-list-example.html'</span>,
+ styleUrls: [<span class="hljs-string">'./sidenav-navigation-list-example.css'</span>],
+ encapsulation: ViewEncapsulation.None,
+})
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> SidenavNavigationListExample {
+ links = [
+ {
+ <span class="hljs-string">'name'</span>:<span class="hljs-string">'Google'</span>,
+ <span class="hljs-string">'url'</span> : <span class="hljs-string">'/components/component/sidenav'</span>
+ },
+ {
+ <span class="hljs-string">'name'</span>:<span class="hljs-string">'Wikipedia'</span>,
+ <span class="hljs-string">'url'</span> : <span class="hljs-string">'/components/component/sidenav'</span>
+ },
+ {
+ <span class="hljs-string">'name'</span>:<span class="hljs-string">'Github'</span>,
+ <span class="hljs-string">'url'</span> : <span class="hljs-string">'/components/component/sidenav'</span>
+ },
+ {
+ <span class="hljs-string">'name'</span>:<span class="hljs-string">'Facebook'</span>,
+ <span class="hljs-string">'url'</span> : <span class="hljs-string">'/components/component/sidenav'</span>
+ }
+ ]
+}

src/assets/plunker/examples/sidenav-navigation-list/sidenav-navigation-list-example.css

@@ -0,0 +1,22 @@
+.example-sidenav-navigation-list-container {
+ width: 500px;
+ height: 300px;
+ border: 1px solid rgba(0, 0, 0, 0.5);
+}
+
+.example-sidenav-navigation-list-container md-sidenav {
+ max-width: 200px;
+}
+
+.example-sidenav-navigation-list-container .mat-sidenav-content,
+.example-sidenav-navigation-list-container md-sidenav {
+ display: flex;
+ overflow: visible;
+}
+
+.example-scrolling-content {
+ overflow: auto;
+ padding:5px;
+}
+
+

src/assets/plunker/examples/sidenav-navigation-list/sidenav-navigation-list-example.html

@@ -0,0 +1,21 @@
+<md-sidenav-container class="example-sidenav-navigation-list-container">
+ <md-sidenav #sidenav mode="side" opened="true">
+ <md-toolbar color="primary">Title for the app</md-toolbar>
+ <md-nav-list>
+ <md-list-item *ngFor="let link of links">
+ <a md-line>{{ link.name }}</a>
+
+ </md-list-item>
+ </md-nav-list>
+ </md-sidenav>
+
+ <div class="example-scrolling-content">
+ <p>
+ Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, fusce vel in pellentesque. Nisl rutrum
+ etiam morbi consectetuer tempor magna, aenean nullam nunc id, neque vivamus interdum sociis nulla scelerisque sem, dolor
+ id wisi turpis magna aliquam magna.</p>
+ <button md-raised-button color="primary" (click)="sidenav.toggle()">
+ Sidenav Toggle
+ </button>
+ </div>
+</md-sidenav-container>

src/assets/plunker/examples/sidenav-navigation-list/sidenav-navigation-list-example.ts

@@ -0,0 +1,29 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+
+@Component({
+ selector: 'sidenav-navigation-list-example',
+ templateUrl: './sidenav-navigation-list-example.html',
+ styleUrls: ['./sidenav-navigation-list-example.css'],
+ encapsulation: ViewEncapsulation.None,
+})
+export class SidenavNavigationListExample {
+ links = [
+ {
+ 'name':'Google',
+ 'url' : '/components/component/sidenav'
+ },
+ {
+ 'name':'Wikipedia',
+ 'url' : '/components/component/sidenav'
+ },
+ {
+ 'name':'Github',
+ 'url' : '/components/component/sidenav'
+ },
+ {
+ 'name':'Facebook',
+ 'url' : '/components/component/sidenav'
+ }
+ ]
+}