-
-
-
-
-
- ]]>
- Builds the top toolbar
-
-
-
- toolbarTitle?: string
- The title of your toolbar
-
-
-
- logo?: string
- The path to your toolbar logo
-
-
-
-
-
-
-
- ]]>
- Builds the left nav and content area
-
-
-
- ]]>
- Optional Title]]>
- Optional list toolbar w/ title
-
-
-
- ]]>
- The list items wrapper
-
-
-
- ]]>
- Loads html for each route (view)
-
-
-
-
-
-
-
- ]]>
- The toolbar for the content
-
-
-
- ]]>
- The button to toggle the manage list sidenav
-
-
-
- Optional Subtitle]]>
- Optional subtitle
-
-
-
- ]]>
- Used as a spacer between buttons
-
-
-
- ]]>
- Toolbar icon buttons
-
-
-
-
-
-
-
- ]]>
- Optional footer before ]]>
-
-
-
- ]]>
- Optional inner footer before ]]>
-
-
-
-
-
-
- [opened], [mode], [sidenavWidth]
- Set media breakpoints to change the value of the inputs
-
-
-
- (click) media prevention
- Close sidenav only on certain media breakpoints
-
-
-
-
+
+
+
+
+
+ Nav Title
+
+ Sidenav content here
+
+
+
+ Content Title
+
+ Content goes here
+
+
+
+
+
+
+
+
+
+
+ homeHome
+
+
+
+
+
+
+ Nav Title
+
+ Sidenav content here
+
+
+
+ Content Title
+
+ Content goes here
+
+
+
+ ]]>
+
+
+
+
+ Full Demo
+ Full working code with all options and templates
+
+
+
+
+
+ {{item.icon}}{{item.title}}
+
+
+
+
+
+
+
+ Optional Title
+
+
+
+
+ {{item.icon}} {{item.title}}
+
+
+
+
+
+
+ Content Title
+
+
+
+
+
+
+
+ Products Sales
+ usage stats for our products
+
+
+ card content
+
+
+
+
+ View More
+
+
+
+
+ Customer Activity
+ Recent activity from select members
+
+
+ card content
+
+
+
+
+ View More
+
+
+
+
+
+
+ Alerts
+ Items requiring attention
+
+
+ card content
+
+
+
+
+ View More
+
+
+
+
+ Favorites
+ Your favorite products
+
+
+ card content
+
+
+
+
+ View More
+
+
+
+
-
HTML
-
-
-
-
-
-
- Go Back
-
-
-
-
-
- Optional footer
-
-
+ routes: Object[] = [{
+ icon: 'home',
+ route: '.',
+ title: 'Home',
+ }, {
+ icon: 'library_books',
+ route: '.',
+ title: 'Documentation',
+ }, {
+ icon: 'color_lens',
+ route: '.',
+ title: 'Style Guide',
+ }, {
+ icon: 'view_quilt',
+ route: '.',
+ title: 'Layouts',
+ }, {
+ icon: 'picture_in_picture',
+ route: '.',
+ title: 'Components & Addons',
+ },
+ ];
+ usermenu: Object[] = [{
+ icon: 'swap_horiz',
+ route: '.',
+ title: 'Switch account',
+ }, {
+ icon: 'tune',
+ route: '.',
+ title: 'Account settings',
+ }, {
+ icon: 'exit_to_app',
+ route: '.',
+ title: 'Sign out',
+ },
+ ];
+ navmenu: Object[] = [{
+ icon: 'looks_one',
+ route: '.',
+ title: 'First item',
+ description: 'Item description',
+ }, {
+ icon: 'looks_two',
+ route: '.',
+ title: 'Second item',
+ description: 'Item description',
+ }, {
+ icon: 'looks_3',
+ route: '.',
+ title: 'Third item',
+ description: 'Item description',
+ }, {
+ icon: 'looks_4',
+ route: '.',
+ title: 'Fourth item',
+ description: 'Item description',
+ }, {
+ icon: 'looks_5',
+ route: '.',
+ title: 'Fifth item',
+ description: 'Item description',
+ },
+ ];
+
+ constructor(private _changeDetectorRef: ChangeDetectorRef,
+ public media: TdMediaService) {}
+
+ ngAfterViewInit(): void {
+ // broadcast to all listener observables when loading the page
+ this.media.broadcast();
+ this._changeDetectorRef.detectChanges();
+ }
+
+ }
+
+ ]]>
+
+
+
+
\ No newline at end of file
diff --git a/src/app/components/layouts/manage-list/manage-list.component.scss b/src/app/components/layouts/manage-list/manage-list.component.scss
index e69de29bb2..8b4767991a 100644
--- a/src/app/components/layouts/manage-list/manage-list.component.scss
+++ b/src/app/components/layouts/manage-list/manage-list.component.scss
@@ -0,0 +1,7 @@
+:host /deep/ {
+ .mat-sidenav-container[fullscreen] {
+ position: static;
+ width: 100%;
+ min-height: 200px;
+ }
+}
diff --git a/src/app/components/layouts/manage-list/manage-list.component.ts b/src/app/components/layouts/manage-list/manage-list.component.ts
index 8a63f8ade5..3af8cb6fc9 100644
--- a/src/app/components/layouts/manage-list/manage-list.component.ts
+++ b/src/app/components/layouts/manage-list/manage-list.component.ts
@@ -15,6 +15,70 @@ export class ManageListComponent implements AfterViewInit {
@HostBinding('@routeAnimation') routeAnimation: boolean = true;
@HostBinding('class.td-route-animation') classAnimation: boolean = true;
+ routes: Object[] = [{
+ icon: 'home',
+ route: '.',
+ title: 'Home',
+ }, {
+ icon: 'library_books',
+ route: '.',
+ title: 'Documentation',
+ }, {
+ icon: 'color_lens',
+ route: '.',
+ title: 'Style Guide',
+ }, {
+ icon: 'view_quilt',
+ route: '.',
+ title: 'Layouts',
+ }, {
+ icon: 'picture_in_picture',
+ route: '.',
+ title: 'Components & Addons',
+ },
+ ];
+ usermenu: Object[] = [{
+ icon: 'swap_horiz',
+ route: '.',
+ title: 'Switch account',
+ }, {
+ icon: 'tune',
+ route: '.',
+ title: 'Account settings',
+ }, {
+ icon: 'exit_to_app',
+ route: '.',
+ title: 'Sign out',
+ },
+ ];
+ navmenu: Object[] = [{
+ icon: 'looks_one',
+ route: '.',
+ title: 'First item',
+ description: 'Item description',
+ }, {
+ icon: 'looks_two',
+ route: '.',
+ title: 'Second item',
+ description: 'Item description',
+ }, {
+ icon: 'looks_3',
+ route: '.',
+ title: 'Third item',
+ description: 'Item description',
+ }, {
+ icon: 'looks_4',
+ route: '.',
+ title: 'Fourth item',
+ description: 'Item description',
+ }, {
+ icon: 'looks_5',
+ route: '.',
+ title: 'Fifth item',
+ description: 'Item description',
+ },
+ ];
+
constructor(private _changeDetectorRef: ChangeDetectorRef,
public media: TdMediaService) {}
diff --git a/src/app/components/layouts/nav-list/nav-list.component.html b/src/app/components/layouts/nav-list/nav-list.component.html
index d6f43572b5..604a46978a 100644
--- a/src/app/components/layouts/nav-list/nav-list.component.html
+++ b/src/app/components/layouts/nav-list/nav-list.component.html
@@ -1,215 +1,333 @@
-
-
-
-
- view_compact
- Item Name
- item description
-
-
-
- view_quilt
- Item Name
- item description
-
-
-
-
- Nav List
-
-
-
- Nav List Layout
- The Nav View with an embedded list (this page is using nav list)
-
-
- Recommended usage:
-
- Category list view (docs, blog or logs)
- launch
-
-
-
- List of content items (email app, chat app, etc.)
- launch
-
-
-
-
-
-
-
-
-
-
- ]]>
- Builds the top toolbar, left nav and content area
-
-
-
- toolbarTitle?: string
- The title of your toolbar
-
-
-
- logo?: string
- The path to your toolbar logo
-
-
-
- navigationRoute?: string
- Optional route navigation on logo/icon/title
-
-
-
- color?: string
- Toolbar color (primary | accent | warn | none)
-
-
-
- ]]>
- menu button always at the left
- (can be used to toggle main sidenav with [tdLayoutToggle])
-
-
-
- ]]>
- The list items wrapper
-
-
-
- ]]>
- Right column page title (optional)
-
-
-
- ]]>
- The button to toggle the nav list sidenav
-
-
-
- ]]>
- Loads html for each route (view)
-
-
-
-
-
-
-
- ]]>
- Optional footer
-
+
+ Minimum Demo
+ Minimum code for this layout with no wrapper
+
+
+
+
+ Sidenav content here
+
+ Content goes here
+
+
+
+
+
+
+
+ Sidenav content here
+
+ Content goes here
+
+ ]]>
+
+
+
+
+ Basic Demo
+ Basic layout wrapper & nav drawer
+
+
+
+
+
+ homeHome
+
+
+
+
+
+
+ Sidenav content here
+
+
+
+
+ Content goes here
+
+
+
+
+
+
+
+
+
+ homeHome
+
+
+
+
+
+
+ Sidenav content here
+
+
+
+
+ Content goes here
+
+
+ ]]>
+
+
+
+
+ Full Demo
+ Full working code with all options and templates
+
+
+
+
+
+ {{item.icon}}{{item.title}}
+
+
+
+
+
+
+
+ Covalent
+
+
+
+
+
+ {{item.icon}}
+ {{item.title}}
+ {{item.description}}
+
+
+
+
+
+
+ Main Content
+ content area
+
+
+ card content
+
+
+
+
+ View More
+
+
+
+
+ Copyright © 2017 Teradata. All rights reserved
+
+
+
+
+
+
+
+
+
+
+
+ { {item.icon} }{ {item.title} }
+
+
+
+
+
+
+
+ Covalent
+
+
+
+
+
+ { {item.icon} }
+ { {item.title} }
+ { {item.description} }
+
+
+
+
+
+
+ Main Content
+ content area
-
- ]]>
- Optional inner footer
-
-
-
-
-
-
- [opened], [mode], [sidenavWidth]
- Set media breakpoints to change the value of the inputs
-
+
+ card content
+
-
- (click) media prevention
- Close sidenav only on certain media breakpoints
-
-
-
-
-
+ Copyright © 2017 Teradata. All rights reserved
+
+
+
+
+ ]]>
+
+ TypeScript:
+
+
-
-
-
+ routes: Object[] = [{
+ icon: 'home',
+ route: '.',
+ title: 'Home',
+ }, {
+ icon: 'library_books',
+ route: '.',
+ title: 'Documentation',
+ }, {
+ icon: 'color_lens',
+ route: '.',
+ title: 'Style Guide',
+ }, {
+ icon: 'view_quilt',
+ route: '.',
+ title: 'Layouts',
+ }, {
+ icon: 'picture_in_picture',
+ route: '.',
+ title: 'Components & Addons',
+ },
+ ];
+ usermenu: Object[] = [{
+ icon: 'swap_horiz',
+ route: '.',
+ title: 'Switch account',
+ }, {
+ icon: 'tune',
+ route: '.',
+ title: 'Account settings',
+ }, {
+ icon: 'exit_to_app',
+ route: '.',
+ title: 'Sign out',
+ },
+ ];
+ navmenu: Object[] = [{
+ icon: 'looks_one',
+ route: '.',
+ title: 'First item',
+ description: 'Item description',
+ }, {
+ icon: 'looks_two',
+ route: '.',
+ title: 'Second item',
+ description: 'Item description',
+ }, {
+ icon: 'looks_3',
+ route: '.',
+ title: 'Third item',
+ description: 'Item description',
+ }, {
+ icon: 'looks_4',
+ route: '.',
+ title: 'Fourth item',
+ description: 'Item description',
+ }, {
+ icon: 'looks_5',
+ route: '.',
+ title: 'Fifth item',
+ description: 'Item description',
+ },
+ ];
+
+ constructor(private _changeDetectorRef: ChangeDetectorRef,
+ public media: TdMediaService) {}
+
+ ngAfterViewInit(): void {
+ // broadcast to all listener observables when loading the page
+ this.media.broadcast();
+ this._changeDetectorRef.detectChanges();
+ }
+
+ }
+ ]]>
+
+
+
+
\ No newline at end of file
diff --git a/src/app/components/layouts/nav-list/nav-list.component.scss b/src/app/components/layouts/nav-list/nav-list.component.scss
index e69de29bb2..8b4767991a 100644
--- a/src/app/components/layouts/nav-list/nav-list.component.scss
+++ b/src/app/components/layouts/nav-list/nav-list.component.scss
@@ -0,0 +1,7 @@
+:host /deep/ {
+ .mat-sidenav-container[fullscreen] {
+ position: static;
+ width: 100%;
+ min-height: 200px;
+ }
+}
diff --git a/src/app/components/layouts/nav-list/nav-list.component.ts b/src/app/components/layouts/nav-list/nav-list.component.ts
index 46d40a7a47..81df7635b7 100644
--- a/src/app/components/layouts/nav-list/nav-list.component.ts
+++ b/src/app/components/layouts/nav-list/nav-list.component.ts
@@ -15,6 +15,70 @@ export class NavListComponent implements AfterViewInit {
@HostBinding('@routeAnimation') routeAnimation: boolean = true;
@HostBinding('class.td-route-animation') classAnimation: boolean = true;
+ routes: Object[] = [{
+ icon: 'home',
+ route: '.',
+ title: 'Home',
+ }, {
+ icon: 'library_books',
+ route: '.',
+ title: 'Documentation',
+ }, {
+ icon: 'color_lens',
+ route: '.',
+ title: 'Style Guide',
+ }, {
+ icon: 'view_quilt',
+ route: '.',
+ title: 'Layouts',
+ }, {
+ icon: 'picture_in_picture',
+ route: '.',
+ title: 'Components & Addons',
+ },
+ ];
+ usermenu: Object[] = [{
+ icon: 'swap_horiz',
+ route: '.',
+ title: 'Switch account',
+ }, {
+ icon: 'tune',
+ route: '.',
+ title: 'Account settings',
+ }, {
+ icon: 'exit_to_app',
+ route: '.',
+ title: 'Sign out',
+ },
+ ];
+ navmenu: Object[] = [{
+ icon: 'looks_one',
+ route: '.',
+ title: 'First item',
+ description: 'Item description',
+ }, {
+ icon: 'looks_two',
+ route: '.',
+ title: 'Second item',
+ description: 'Item description',
+ }, {
+ icon: 'looks_3',
+ route: '.',
+ title: 'Third item',
+ description: 'Item description',
+ }, {
+ icon: 'looks_4',
+ route: '.',
+ title: 'Fourth item',
+ description: 'Item description',
+ }, {
+ icon: 'looks_5',
+ route: '.',
+ title: 'Fifth item',
+ description: 'Item description',
+ },
+ ];
+
constructor(private _changeDetectorRef: ChangeDetectorRef,
public media: TdMediaService) {}
diff --git a/src/app/components/layouts/nav-view/nav-view.component.html b/src/app/components/layouts/nav-view/nav-view.component.html
index eb54e6a88d..f85de9c63a 100644
--- a/src/app/components/layouts/nav-view/nav-view.component.html
+++ b/src/app/components/layouts/nav-view/nav-view.component.html
@@ -1,108 +1,309 @@
-
-
-
-
-
- Nav View
- A simple layout with toolbar & sidenav (this page is using nav view)
-
-
- Recommended usage:
-
- Oveview dashboard with cards
- launch
-
-
-
- Dashboard with charts
- launch
-
-
-
-
-
-
-
-
-
-
- ]]>
- Builds the top toolbar and content area
-
-
-
- toolbarTitle?: string
- The title of your toolbar
-
-
-
- logo?: string
- The path to your toolbar logo
-
-
-
- color?: string
- Toolbar color (primary | accent | warn | none)
-
-
-
- navigationRoute?: string
- Optional route navigation on logo/icon/title
-
-
-
- ]]>
- menu button always at the left
- (can be used to toggle main sidenav with [tdLayoutToggle])
-
-
-
- ]]>
- Loads html for each route (view)
-
-
-
-
-
-
-
- ]]>
- Optional footer
-
-
-
-
+
+ Minimum Demo
+ Minimum code for this layout with no wrapper
+
+
+
+
+ Content goes here
+
+
+
+
+
+
+
+ Content goes here
+
+ ]]>
+
+
+
+
+ Basic Demo
+ Basic layout wrapper & nav drawer
+
+
+
+
+
+ homeHome
+
+
+
+
+
+ Content goes here
+
+
+
+
+
+
+
+
+
+ homeHome
+
+
+
+
+
+ Content goes here
+
+
+ ]]>
+
+
+
+
+ Full Demo
+ Full working code with all options and templates
+
+
+
+
+
+ {{item.icon}}{{item.title}}
+
+
+
+
+
+
+
+
+ Products Sales
+ usage stats for our products
+
+
+ card content
+
+
+
+
+ View More
+
+
+
+
+ Customer Activity
+ Recent activity from select members
+
+
+ card content
+
+
+
+
+ View More
+
+
+
-
-
HTML
-
-
-
-
-
- Optional footer
-
-
- ]]>
-
+
+
+ Alerts
+ Items requiring attention
+
+
+ card content
+
+
+
+
+ View More
+
+
+
+
+ Favorites
+ Your favorite products
+
+
+ card content
+
+
+
+
+ View More
+
+
+
-
-
-
- Go back
-
- Nav List
-
-
-
-
+ Copyright © 2017 Teradata. All rights reserved
+
+
+
+
+
+
+
+
+
+
+
+ { {item.icon} }{ {item.title} }
+
+
+
+
+
+
+
+
+ Products Sales
+ usage stats for our products
+
+
+ card content
+
+
+
+ Customer Activity
+ Recent activity from select members
+
+
+ card content
+
+
+
+
+
+ Alerts
+ Items requiring attention
+
+
+ card content
+
+
+
+
+ View More
+
+
+
+
+ Favorites
+ Your favorite products
+
+
+ card content
+
+
+
+ View More
+
+
+
+
+
+ Copyright © 2017 Teradata. All rights reserved
+
+
+
+
+ ]]>
+
+ TypeScript:
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/components/layouts/nav-view/nav-view.component.scss b/src/app/components/layouts/nav-view/nav-view.component.scss
index e69de29bb2..8b4767991a 100644
--- a/src/app/components/layouts/nav-view/nav-view.component.scss
+++ b/src/app/components/layouts/nav-view/nav-view.component.scss
@@ -0,0 +1,7 @@
+:host /deep/ {
+ .mat-sidenav-container[fullscreen] {
+ position: static;
+ width: 100%;
+ min-height: 200px;
+ }
+}
diff --git a/src/app/components/layouts/nav-view/nav-view.component.ts b/src/app/components/layouts/nav-view/nav-view.component.ts
index 2faf5d2557..18ad5b8080 100644
--- a/src/app/components/layouts/nav-view/nav-view.component.ts
+++ b/src/app/components/layouts/nav-view/nav-view.component.ts
@@ -14,4 +14,41 @@ export class NavViewComponent {
@HostBinding('@routeAnimation') routeAnimation: boolean = true;
@HostBinding('class.td-route-animation') classAnimation: boolean = true;
+ routes: Object[] = [{
+ icon: 'home',
+ route: '.',
+ title: 'Home',
+ }, {
+ icon: 'library_books',
+ route: '.',
+ title: 'Documentation',
+ }, {
+ icon: 'color_lens',
+ route: '.',
+ title: 'Style Guide',
+ }, {
+ icon: 'view_quilt',
+ route: '.',
+ title: 'Layouts',
+ }, {
+ icon: 'picture_in_picture',
+ route: '.',
+ title: 'Components & Addons',
+ },
+ ];
+ usermenu: Object[] = [{
+ icon: 'swap_horiz',
+ route: '.',
+ title: 'Switch account',
+ }, {
+ icon: 'tune',
+ route: '.',
+ title: 'Account settings',
+ }, {
+ icon: 'exit_to_app',
+ route: '.',
+ title: 'Sign out',
+ },
+ ];
+
}
diff --git a/src/app/components/layouts/overview/overview.component.html b/src/app/components/layouts/overview/overview.component.html
index 48b47fdf4d..a647955ddc 100644
--- a/src/app/components/layouts/overview/overview.component.html
+++ b/src/app/components/layouts/overview/overview.component.html
@@ -1,178 +1,172 @@
-
-
-
-
-
- For your entire app or for different sections of your app, select one of these Material Design layout options:
-
-
-
+
+ Layout Options
+ We offer 4 Material Design layouts for you
+
+
+ For your entire app or for different sections of your app, select one of these Material Design layout options:
+
-
- {{item.icon}}
- {{item.title}}
- {{item.description}}
+
+ 
+ {{item.title}}
+ {{item.description}}
-
-
-
-
-
Flexbox Layout ("grid")
-
-
-
-
We've ported the CSS3 Flexbox layout system from Angular-Material v1, so those docs shoud be your starting point.
-
In a nutshell, the Flexbox layout gives you:
-
- - Horizontal row layout for child elements
- - Vertical column layout for child elements
- - Alignment & ordering for child elements
- - Any "flex" elastic width for child elements
- - Conditionally responsive versions for xs,sm,md,lg,xl breakpoints
-
-
-
Horizontal row container:
+
{{item.title}}
+ {{item.description}}
+
+
+
+
+
+
+
+ Flexbox Layout ("grid")
+
+
+
+
We've ported the CSS3 Flexbox layout system from Angular-Material v1, so those docs shoud be your starting point.
+
In a nutshell, the Flexbox layout gives you:
+
+ - Horizontal row layout for child elements
+ - Vertical column layout for child elements
+ - Alignment & ordering for child elements
+ - Any "flex" elastic width for child elements
+ - Conditionally responsive versions for xs,sm,md,lg,xl breakpoints
+
+
+
Horizontal row container:
+
+
child
+
child
+
child
+
+
+
+
- child
- child
- child
+ child
+ child
+ child
child
- child
- child
-
- ]]>
-
-
-
Vertical column container:
+ ]]>
+
+
+
Vertical column container:
+
+
child
+
child
+
child
+
+
+
+
- child
- child
- child
+ child
+ child
+ child
-
-
-
- child
- child
- child
-
- ]]>
-
-
-
Layout margin
+ ]]>
+
+
+
Layout margin
+
+
child
+
child
+
child
+
+
+
+
- child
- child
- child
+ child
+ child
+ child
child
- child
- child
- Layout padding
+ ]]>
+
+
+ Layout padding
+
+
child
+
child
+
child
+
child
- child
- child
+ child
+ child
+ child