purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-10-31 17:13:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added new tabbed versions of the carded sidenav layouts

Browse Source 
+ Small tweaks on other carded sidenav layouts
This commit is contained in:
Sercan Yemen 2017-10-23 14:39:44 +03:00
parent 4469a2c25a
commit ca8ed939ae
21 changed files with 823 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
package-lock.json generated
View File

@ -51,9 +51,9 @@
}
},
"@angular/animations": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.4.5.tgz",
"integrity": "sha1-WlpVHXV+WlVgCY9vhTXBAtk5VNc=",
"version": "4.4.6",
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.4.6.tgz",
"integrity": "sha1-+mYYmaik44y3xYPHpcl85l1ZKjU=",
"requires": {
"tslib": "1.7.1"
}
@ -143,28 +143,28 @@
}
},
"@angular/common": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-4.4.5.tgz",
"integrity": "sha1-vVF53JIq2/TD6m37Gec8uEn/3Dc=",
"version": "4.4.6",
"resolved": "https://registry.npmjs.org/@angular/common/-/common-4.4.6.tgz",
"integrity": "sha1-S4FCByTggooOg5uVpV6xp+g5GPI=",
"requires": {
"tslib": "1.7.1"
}
},
"@angular/compiler": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.4.5.tgz",
"integrity": "sha1-hyGlkQ8rtS8J4tQEytJk817eWQI=",
"version": "4.4.6",
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.4.6.tgz",
"integrity": "sha1-LuH68lt1fh0SiXkHS+f65SmzvCA=",
"requires": {
"tslib": "1.7.1"
}
},
"@angular/compiler-cli": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.4.5.tgz",
"integrity": "sha1-YfoDNqzRogjF8cXG1N9nnpmVMkg=",
"version": "4.4.6",
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.4.6.tgz",
"integrity": "sha1-uv09HiYOmQh+uajPdTLb1gOrubE=",
"dev": true,
"requires": {
"@angular/tsc-wrapped": "4.4.5",
"@angular/tsc-wrapped": "4.4.6",
"minimist": "1.2.0",
"reflect-metadata": "0.1.10"
},
@ -178,9 +178,9 @@
}
},
"@angular/core": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-4.4.5.tgz",
"integrity": "sha1-VKy8vaEXGfiDx4apBpdKvrEy8aA=",
"version": "4.4.6",
"resolved": "https://registry.npmjs.org/@angular/core/-/core-4.4.6.tgz",
"integrity": "sha1-EwMf0Q3P5DiHVBmzjyESCVi8I1Q=",
"requires": {
"tslib": "1.7.1"
}
@ -194,25 +194,25 @@
}
},
"@angular/forms": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.4.5.tgz",
"integrity": "sha1-6VUghiMqqyzh0I7xmLYiBOoTxDs=",
"version": "4.4.6",
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.4.6.tgz",
"integrity": "sha1-/mSs5CQ1wbgPSQNLfEHOjK8UpEo=",
"requires": {
"tslib": "1.7.1"
}
},
"@angular/http": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/@angular/http/-/http-4.4.5.tgz",
"integrity": "sha1-LHNe2EJAH8I1ZBkmjiiNzyOW6E8=",
"version": "4.4.6",
"resolved": "https://registry.npmjs.org/@angular/http/-/http-4.4.6.tgz",
"integrity": "sha1-CvaAxnEL3AJtlA4iXP0PalwAXQw=",
"requires": {
"tslib": "1.7.1"
}
},
"@angular/language-service": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-4.4.5.tgz",
"integrity": "sha1-zO8Tm40+FoSwGvo1xvvyFy4rtnY=",
"version": "4.4.6",
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-4.4.6.tgz",
"integrity": "sha1-SY7OlcX2BmQDv5/TxYMa9CtFYYs=",
"dev": true
},
"@angular/material": {
@ -224,33 +224,33 @@
}
},
"@angular/platform-browser": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.4.5.tgz",
"integrity": "sha1-dOuRwLdYEm8m1T7lbHz0ZovZysU=",
"version": "4.4.6",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.4.6.tgz",
"integrity": "sha1-qYOcVH4bZU+h0kqJeAyLpquNzOA=",
"requires": {
"tslib": "1.7.1"
}
},
"@angular/platform-browser-dynamic": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.4.5.tgz",
"integrity": "sha1-d029wdkPd12/HjGfbtQrJgYjth8=",
"version": "4.4.6",
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.4.6.tgz",
"integrity": "sha1-TT2aanvyzz3kBYphWuBZ7/ZB+jY=",
"requires": {
"tslib": "1.7.1"
}
},
"@angular/router": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-4.4.5.tgz",
"integrity": "sha1-9zEwz0h9mjLMGYiv2llmX0Siiok=",
"version": "4.4.6",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-4.4.6.tgz",
"integrity": "sha1-D2rSmuD/jSyeo3m9MgRHIXt+yGY=",
"requires": {
"tslib": "1.7.1"
}
},
"@angular/tsc-wrapped": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.4.5.tgz",
"integrity": "sha1-MKDLtDpmOqddyphIlL5IE3eN3Jw=",
"version": "4.4.6",
"resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.4.6.tgz",
"integrity": "sha1-Fnh8u/UL3H5zgSOxnDJSfyROF40=",
"dev": true,
"requires": {
"tsickle": "0.21.6"

22
package.json
View File

@ -16,18 +16,18 @@
"private": true,
"dependencies": {
"@agm/core": "1.0.0-beta.1",
"@angular/animations": "4.4.5",
"@angular/animations": "4.4.6",
"@angular/cdk": "2.0.0-beta.12",
"@angular/common": "4.4.5",
"@angular/compiler": "4.4.5",
"@angular/core": "4.4.5",
"@angular/common": "4.4.6",
"@angular/compiler": "4.4.6",
"@angular/core": "4.4.6",
"@angular/flex-layout": "2.0.0-beta.9",
"@angular/forms": "4.4.5",
"@angular/http": "4.4.5",
"@angular/forms": "4.4.6",
"@angular/http": "4.4.6",
"@angular/material": "2.0.0-beta.12",
"@angular/platform-browser": "4.4.5",
"@angular/platform-browser-dynamic": "4.4.5",
"@angular/router": "4.4.5",
"@angular/platform-browser": "4.4.6",
"@angular/platform-browser-dynamic": "4.4.6",
"@angular/router": "4.4.6",
"@swimlane/ngx-charts": "6.0.2",
"@swimlane/ngx-datatable": "9.3.1",
"@swimlane/ngx-dnd": "3.0.0",
@ -50,8 +50,8 @@
},
"devDependencies": {
"@angular/cli": "1.4.7",
"@angular/compiler-cli": "4.4.5",
"@angular/language-service": "4.4.5",
"@angular/compiler-cli": "4.4.6",
"@angular/language-service": "4.4.6",
"@angularclass/hmr": "2.1.3",
"@types/jasmine": "2.6.0",
"@types/jasminewd2": "2.0.2",

56
src/app/core/scss/partials/_page-layouts.scss
View File

@ -222,6 +222,62 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
}
}
}
// Tabbed
&.tabbed {
> mat-sidenav-container {
> .mat-sidenav-content,
> .mat-drawer-content {
width: calc(100% - 240px);
.center {
width: calc(100% - 32px);
@include media-breakpoint-down('md') {
width: calc(100% - 64px);
}
.header {
flex: 1;
}
.content-card {
.content {
.mat-tab-group {
overflow: hidden;
.mat-tab-header {
.mat-tab-label {
height: 64px;
}
}
.mat-tab-body {
overflow: hidden;
.mat-tab-body-content {
overflow: hidden;
.tab-content {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
}
}
}
}
}
}
}
}
}
}
}
// Left sidenav

151
src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html Normal file
View File

@ -0,0 +1,151 @@
<div class="page-layout carded left-sidenav tabbed single-scroll" fusePerfectScrollbar>
<!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<mat-sidenav-container>
<!-- SIDENAV -->
<mat-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
<!-- / SIDENAV CONTENT -->
</mat-sidenav>
<!-- / SIDENAV -->
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header white-fg p-24">
<div fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button sidenav-toggle mr-8"
fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md>
<mat-icon>menu</mat-icon>
</button>
<h2>Left sidenav with tabs and page scroll</h2>
</div>
</div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg">
<!-- CONTENT -->
<div class="content">
<mat-tab-group>
<mat-tab label="Tab 1">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 2">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 3">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 4">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 5">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 6">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 7">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 8">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 9">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 10">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
</mat-tab-group>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
</mat-sidenav-container>
</div>

0
src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.scss Normal file
View File

14
src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.ts Normal file
View File

@ -0,0 +1,14 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-carded-left-sidenav-2-tabbed',
templateUrl: './left-sidenav-2-tabbed.component.html',
styleUrls : ['./left-sidenav-2-tabbed.component.scss']
})
export class FuseCardedLeftSidenav2TabbedComponent
{
constructor()
{
}
}

4
src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html
View File

@ -11,14 +11,16 @@
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24">
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
<!-- / SIDENAV CONTENT -->

151
src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html Normal file
View File

@ -0,0 +1,151 @@
<div class="page-layout carded left-sidenav tabbed" fusePerfectScrollbar>
<!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<mat-sidenav-container>
<!-- SIDENAV -->
<mat-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
<!-- / SIDENAV CONTENT -->
</mat-sidenav>
<!-- / SIDENAV -->
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header white-fg p-24">
<div fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button sidenav-toggle mr-8"
fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md>
<mat-icon>menu</mat-icon>
</button>
<h2>Left sidenav with tabs and content scroll</h2>
</div>
</div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg">
<!-- CONTENT -->
<div class="content">
<mat-tab-group>
<mat-tab label="Tab 1">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 2">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 3">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 4">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 5">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 6">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 7">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 8">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 9">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 10">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
</mat-tab-group>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
</mat-sidenav-container>
</div>

0
src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.scss Normal file
View File

14
src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts Normal file
View File

@ -0,0 +1,14 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-carded-left-sidenav-tabbed',
templateUrl: './left-sidenav-tabbed.component.html',
styleUrls : ['./left-sidenav-tabbed.component.scss']
})
export class FuseCardedLeftSidenavTabbedComponent
{
constructor()
{
}
}

2
src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html
View File

@ -11,7 +11,7 @@
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24">
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->

151
src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html Normal file
View File

@ -0,0 +1,151 @@
<div class="page-layout carded right-sidenav tabbed single-scroll" fusePerfectScrollbar>
<!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<mat-sidenav-container>
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header white-fg p-24">
<div fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button sidenav-toggle mr-8"
fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md>
<mat-icon>menu</mat-icon>
</button>
<h2>Right sidenav with tabs and page scroll</h2>
</div>
</div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg">
<!-- CONTENT -->
<div class="content">
<mat-tab-group>
<mat-tab label="Tab 1">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 2">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 3">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 4">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 5">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 6">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 7">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 8">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 9">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 10">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
</mat-tab-group>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
<!-- SIDENAV -->
<mat-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
<!-- / SIDENAV CONTENT -->
</mat-sidenav>
<!-- / SIDENAV -->
</mat-sidenav-container>
</div>

0
src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.scss Normal file
View File

14
src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.ts Normal file
View File

@ -0,0 +1,14 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-carded-right-sidenav-2-tabbed',
templateUrl: './right-sidenav-2-tabbed.component.html',
styleUrls : ['./right-sidenav-2-tabbed.component.scss']
})
export class FuseCardedRightSidenav2TabbedComponent
{
constructor()
{
}
}

4
src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html
View File

@ -49,14 +49,16 @@
fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24">
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
<!-- / SIDENAV CONTENT -->

151
src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html Normal file
View File

@ -0,0 +1,151 @@
<div class="page-layout carded right-sidenav tabbed" fusePerfectScrollbar>
<!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND -->
<mat-sidenav-container>
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header white-fg p-24">
<div fxLayout="row" fxLayoutAlign="start center">
<button mat-button class="mat-icon-button sidenav-toggle mr-8"
fuseMatSidenavToggler="carded-left-sidenav" fxHide.gt-md>
<mat-icon>menu</mat-icon>
</button>
<h2>Right sidenav with tabs and content scroll</h2>
</div>
</div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg">
<!-- CONTENT -->
<div class="content">
<mat-tab-group>
<mat-tab label="Tab 1">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 2">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 3">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 4">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 5">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 6">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 7">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 8">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 9">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
<mat-tab label="Tab 10">
<div class="tab-content p-24" fusePerfectScrollbar>
<!-- PUT YOUR TAB CONTENT HERE -->
<fuse-demo-content></fuse-demo-content>
<!-- / PUT YOUR TAB CONTENT HERE -->
</div>
</mat-tab>
</mat-tab-group>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
<!-- SIDENAV -->
<mat-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
<!-- / SIDENAV CONTENT -->
</mat-sidenav>
<!-- / SIDENAV -->
</mat-sidenav-container>
</div>

0
src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.scss Normal file
View File

14
src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.ts Normal file
View File

@ -0,0 +1,14 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-carded-right-sidenav-tabbed',
templateUrl: './right-sidenav-tabbed.component.html',
styleUrls : ['./right-sidenav-tabbed.component.scss']
})
export class FuseCardedRightSidenavTabbedComponent
{
constructor()
{
}
}

4
src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html
View File

@ -49,14 +49,16 @@
fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
<!-- SIDENAV HEADER -->
<div class="header p-24">
<div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
<h2>Sidenav header</h2>
</div>
<!-- / SIDENAV HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content p-24" fusePerfectScrollbar>
<fuse-demo-sidenav></fuse-demo-sidenav>
</div>
<!-- / SIDENAV CONTENT -->

24
src/app/main/content/ui/page-layouts/page-layouts.module.ts
View File

@ -5,9 +5,13 @@ import { FuseDemoModule } from '../../../../core/components/demo/demo.module';
import { FuseCardedFullWidthComponent } from './carded/fullwidth/fullwidth.component';
import { FuseCardedFullWidth2Component } from './carded/fullwidth-2/fullwidth-2.component';
import { FuseCardedLeftSidenavComponent } from './carded/left-sidenav/left-sidenav.component';
import { FuseCardedLeftSidenavTabbedComponent } from './carded/left-sidenav-tabbed/left-sidenav-tabbed.component';
import { FuseCardedLeftSidenav2Component } from './carded/left-sidenav-2/left-sidenav-2.component';
import { FuseCardedLeftSidenav2TabbedComponent } from './carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component';
import { FuseCardedRightSidenavComponent } from './carded/right-sidenav/right-sidenav.component';
import { FuseCardedRightSidenavTabbedComponent } from './carded/right-sidenav-tabbed/right-sidenav-tabbed.component';
import { FuseCardedRightSidenav2Component } from './carded/right-sidenav-2/right-sidenav-2.component';
import { FuseCardedRightSidenav2TabbedComponent } from './carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component';
import { FuseSimpleFullWidthComponent } from './simple/fullwidth/fullwidth.component';
import { FuseSimpleLeftSidenavComponent } from './simple/left-sidenav/left-sidenav.component';
import { FuseSimpleLeftSidenav2Component } from './simple/left-sidenav-2/left-sidenav-2.component';
@ -31,18 +35,34 @@ const routes: Routes = [
path : 'ui/page-layouts/carded/left-sidenav',
component: FuseCardedLeftSidenavComponent
},
{
path : 'ui/page-layouts/carded/left-sidenav-tabbed',
component: FuseCardedLeftSidenavTabbedComponent
},
{
path : 'ui/page-layouts/carded/left-sidenav-2',
component: FuseCardedLeftSidenav2Component
},
{
path : 'ui/page-layouts/carded/left-sidenav-2-tabbed',
component: FuseCardedLeftSidenav2TabbedComponent
},
{
path : 'ui/page-layouts/carded/right-sidenav',
component: FuseCardedRightSidenavComponent
},
{
path : 'ui/page-layouts/carded/right-sidenav-tabbed',
component: FuseCardedRightSidenavTabbedComponent
},
{
path : 'ui/page-layouts/carded/right-sidenav-2',
component: FuseCardedRightSidenav2Component
},
{
path : 'ui/page-layouts/carded/right-sidenav-2-tabbed',
component: FuseCardedRightSidenav2TabbedComponent
},
{
path : 'ui/page-layouts/simple/full-width',
component: FuseSimpleFullWidthComponent
@ -91,9 +111,13 @@ const routes: Routes = [
FuseCardedFullWidthComponent,
FuseCardedFullWidth2Component,
FuseCardedLeftSidenavComponent,
FuseCardedLeftSidenavTabbedComponent,
FuseCardedLeftSidenav2Component,
FuseCardedLeftSidenav2TabbedComponent,
FuseCardedRightSidenavComponent,
FuseCardedRightSidenavTabbedComponent,
FuseCardedRightSidenav2Component,
FuseCardedRightSidenav2TabbedComponent,
FuseSimpleFullWidthComponent,
FuseSimpleLeftSidenavComponent,
FuseSimpleLeftSidenav2Component,

24
src/app/navigation.model.ts
View File

@ -330,23 +330,47 @@ export class NavigationModel
'type' : 'item',
'url' : '/ui/page-layouts/carded/left-sidenav'
},
{
'id' : 'left-sidenav-tabbed',
'title': 'Left Sidenav Tabbed',
'type' : 'item',
'url' : '/ui/page-layouts/carded/left-sidenav-tabbed'
},
{
'id' : 'left-sidenav-2',
'title': 'Left Sidenav 2',
'type' : 'item',
'url' : '/ui/page-layouts/carded/left-sidenav-2'
},
{
'id' : 'left-sidenav-2-tabbed',
'title': 'Left Sidenav 2 Tabbed',
'type' : 'item',
'url' : '/ui/page-layouts/carded/left-sidenav-2-tabbed'
},
{
'id' : 'right-sidenav',
'title': 'Right Sidenav',
'type' : 'item',
'url' : '/ui/page-layouts/carded/right-sidenav'
},
{
'id' : 'right-sidenav-tabbed',
'title': 'Right Sidenav Tabbed',
'type' : 'item',
'url' : '/ui/page-layouts/carded/right-sidenav-tabbed'
},
{
'id' : 'right-sidenav-2',
'title': 'Right Sidenav 2',
'type' : 'item',
'url' : '/ui/page-layouts/carded/right-sidenav-2'
},
{
'id' : 'right-sidenav-2-tabbed',
'title': 'Right Sidenav 2 Tabbed',
'type' : 'item',
'url' : '/ui/page-layouts/carded/right-sidenav-2-tabbed'
}
]
},