mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
Added new tabbed versions of the carded sidenav layouts
+ Small tweaks on other carded sidenav layouts
This commit is contained in:
Sercan Yemen
parent
4469a2c25a
commit
ca8ed939ae
74
package-lock.json
generated
74
package-lock.json
generated
|
|
@ -51,9 +51,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@angular/animations": {
|
"@angular/animations": {
|
||||||
"version": "4.4.5",
|
"version": "4.4.6",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.4.5.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.4.6.tgz",
|
||||||
"integrity": "sha1-WlpVHXV+WlVgCY9vhTXBAtk5VNc=",
|
"integrity": "sha1-+mYYmaik44y3xYPHpcl85l1ZKjU=",
|
||||||
"requires": {
|
"requires": {
|
||||||
"tslib": "1.7.1"
|
"tslib": "1.7.1"
|
||||||
}
|
}
|
||||||
|
|
@ -143,28 +143,28 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@angular/common": {
|
"@angular/common": {
|
||||||
"version": "4.4.5",
|
"version": "4.4.6",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/common/-/common-4.4.5.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/common/-/common-4.4.6.tgz",
|
||||||
"integrity": "sha1-vVF53JIq2/TD6m37Gec8uEn/3Dc=",
|
"integrity": "sha1-S4FCByTggooOg5uVpV6xp+g5GPI=",
|
||||||
"requires": {
|
"requires": {
|
||||||
"tslib": "1.7.1"
|
"tslib": "1.7.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@angular/compiler": {
|
"@angular/compiler": {
|
||||||
"version": "4.4.5",
|
"version": "4.4.6",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.4.5.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.4.6.tgz",
|
||||||
"integrity": "sha1-hyGlkQ8rtS8J4tQEytJk817eWQI=",
|
"integrity": "sha1-LuH68lt1fh0SiXkHS+f65SmzvCA=",
|
||||||
"requires": {
|
"requires": {
|
||||||
"tslib": "1.7.1"
|
"tslib": "1.7.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@angular/compiler-cli": {
|
"@angular/compiler-cli": {
|
||||||
"version": "4.4.5",
|
"version": "4.4.6",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.4.5.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.4.6.tgz",
|
||||||
"integrity": "sha1-YfoDNqzRogjF8cXG1N9nnpmVMkg=",
|
"integrity": "sha1-uv09HiYOmQh+uajPdTLb1gOrubE=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"@angular/tsc-wrapped": "4.4.5",
|
"@angular/tsc-wrapped": "4.4.6",
|
||||||
"minimist": "1.2.0",
|
"minimist": "1.2.0",
|
||||||
"reflect-metadata": "0.1.10"
|
"reflect-metadata": "0.1.10"
|
||||||
},
|
},
|
||||||
|
|
@ -178,9 +178,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@angular/core": {
|
"@angular/core": {
|
||||||
"version": "4.4.5",
|
"version": "4.4.6",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/core/-/core-4.4.5.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/core/-/core-4.4.6.tgz",
|
||||||
"integrity": "sha1-VKy8vaEXGfiDx4apBpdKvrEy8aA=",
|
"integrity": "sha1-EwMf0Q3P5DiHVBmzjyESCVi8I1Q=",
|
||||||
"requires": {
|
"requires": {
|
||||||
"tslib": "1.7.1"
|
"tslib": "1.7.1"
|
||||||
}
|
}
|
||||||
|
|
@ -194,25 +194,25 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@angular/forms": {
|
"@angular/forms": {
|
||||||
"version": "4.4.5",
|
"version": "4.4.6",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.4.5.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.4.6.tgz",
|
||||||
"integrity": "sha1-6VUghiMqqyzh0I7xmLYiBOoTxDs=",
|
"integrity": "sha1-/mSs5CQ1wbgPSQNLfEHOjK8UpEo=",
|
||||||
"requires": {
|
"requires": {
|
||||||
"tslib": "1.7.1"
|
"tslib": "1.7.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@angular/http": {
|
"@angular/http": {
|
||||||
"version": "4.4.5",
|
"version": "4.4.6",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/http/-/http-4.4.5.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/http/-/http-4.4.6.tgz",
|
||||||
"integrity": "sha1-LHNe2EJAH8I1ZBkmjiiNzyOW6E8=",
|
"integrity": "sha1-CvaAxnEL3AJtlA4iXP0PalwAXQw=",
|
||||||
"requires": {
|
"requires": {
|
||||||
"tslib": "1.7.1"
|
"tslib": "1.7.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@angular/language-service": {
|
"@angular/language-service": {
|
||||||
"version": "4.4.5",
|
"version": "4.4.6",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-4.4.5.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-4.4.6.tgz",
|
||||||
"integrity": "sha1-zO8Tm40+FoSwGvo1xvvyFy4rtnY=",
|
"integrity": "sha1-SY7OlcX2BmQDv5/TxYMa9CtFYYs=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"@angular/material": {
|
"@angular/material": {
|
||||||
|
|
@ -224,33 +224,33 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@angular/platform-browser": {
|
"@angular/platform-browser": {
|
||||||
"version": "4.4.5",
|
"version": "4.4.6",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.4.5.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.4.6.tgz",
|
||||||
"integrity": "sha1-dOuRwLdYEm8m1T7lbHz0ZovZysU=",
|
"integrity": "sha1-qYOcVH4bZU+h0kqJeAyLpquNzOA=",
|
||||||
"requires": {
|
"requires": {
|
||||||
"tslib": "1.7.1"
|
"tslib": "1.7.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@angular/platform-browser-dynamic": {
|
"@angular/platform-browser-dynamic": {
|
||||||
"version": "4.4.5",
|
"version": "4.4.6",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.4.5.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.4.6.tgz",
|
||||||
"integrity": "sha1-d029wdkPd12/HjGfbtQrJgYjth8=",
|
"integrity": "sha1-TT2aanvyzz3kBYphWuBZ7/ZB+jY=",
|
||||||
"requires": {
|
"requires": {
|
||||||
"tslib": "1.7.1"
|
"tslib": "1.7.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@angular/router": {
|
"@angular/router": {
|
||||||
"version": "4.4.5",
|
"version": "4.4.6",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/router/-/router-4.4.5.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/router/-/router-4.4.6.tgz",
|
||||||
"integrity": "sha1-9zEwz0h9mjLMGYiv2llmX0Siiok=",
|
"integrity": "sha1-D2rSmuD/jSyeo3m9MgRHIXt+yGY=",
|
||||||
"requires": {
|
"requires": {
|
||||||
"tslib": "1.7.1"
|
"tslib": "1.7.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@angular/tsc-wrapped": {
|
"@angular/tsc-wrapped": {
|
||||||
"version": "4.4.5",
|
"version": "4.4.6",
|
||||||
"resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.4.5.tgz",
|
"resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.4.6.tgz",
|
||||||
"integrity": "sha1-MKDLtDpmOqddyphIlL5IE3eN3Jw=",
|
"integrity": "sha1-Fnh8u/UL3H5zgSOxnDJSfyROF40=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"tsickle": "0.21.6"
|
"tsickle": "0.21.6"
|
||||||
|
|
|
||||||
22
package.json
22
package.json
|
|
@ -16,18 +16,18 @@
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@agm/core": "1.0.0-beta.1",
|
"@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/cdk": "2.0.0-beta.12",
|
||||||
"@angular/common": "4.4.5",
|
"@angular/common": "4.4.6",
|
||||||
"@angular/compiler": "4.4.5",
|
"@angular/compiler": "4.4.6",
|
||||||
"@angular/core": "4.4.5",
|
"@angular/core": "4.4.6",
|
||||||
"@angular/flex-layout": "2.0.0-beta.9",
|
"@angular/flex-layout": "2.0.0-beta.9",
|
||||||
"@angular/forms": "4.4.5",
|
"@angular/forms": "4.4.6",
|
||||||
"@angular/http": "4.4.5",
|
"@angular/http": "4.4.6",
|
||||||
"@angular/material": "2.0.0-beta.12",
|
"@angular/material": "2.0.0-beta.12",
|
||||||
"@angular/platform-browser": "4.4.5",
|
"@angular/platform-browser": "4.4.6",
|
||||||
"@angular/platform-browser-dynamic": "4.4.5",
|
"@angular/platform-browser-dynamic": "4.4.6",
|
||||||
"@angular/router": "4.4.5",
|
"@angular/router": "4.4.6",
|
||||||
"@swimlane/ngx-charts": "6.0.2",
|
"@swimlane/ngx-charts": "6.0.2",
|
||||||
"@swimlane/ngx-datatable": "9.3.1",
|
"@swimlane/ngx-datatable": "9.3.1",
|
||||||
"@swimlane/ngx-dnd": "3.0.0",
|
"@swimlane/ngx-dnd": "3.0.0",
|
||||||
|
|
@ -50,8 +50,8 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@angular/cli": "1.4.7",
|
"@angular/cli": "1.4.7",
|
||||||
"@angular/compiler-cli": "4.4.5",
|
"@angular/compiler-cli": "4.4.6",
|
||||||
"@angular/language-service": "4.4.5",
|
"@angular/language-service": "4.4.6",
|
||||||
"@angularclass/hmr": "2.1.3",
|
"@angularclass/hmr": "2.1.3",
|
||||||
"@types/jasmine": "2.6.0",
|
"@types/jasmine": "2.6.0",
|
||||||
"@types/jasminewd2": "2.0.2",
|
"@types/jasminewd2": "2.0.2",
|
||||||
|
|
|
||||||
|
|
@ -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
|
// Left sidenav
|
||||||
|
|
|
||||||
|
|
@ -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,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()
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -11,14 +11,16 @@
|
||||||
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
|
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
|
||||||
|
|
||||||
<!-- SIDENAV HEADER -->
|
<!-- 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>
|
<h2>Sidenav header</h2>
|
||||||
</div>
|
</div>
|
||||||
<!-- / SIDENAV HEADER -->
|
<!-- / SIDENAV HEADER -->
|
||||||
|
|
||||||
<!-- SIDENAV CONTENT -->
|
<!-- SIDENAV CONTENT -->
|
||||||
<div class="content p-24" fusePerfectScrollbar>
|
<div class="content p-24" fusePerfectScrollbar>
|
||||||
|
|
||||||
<fuse-demo-sidenav></fuse-demo-sidenav>
|
<fuse-demo-sidenav></fuse-demo-sidenav>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- / SIDENAV CONTENT -->
|
<!-- / SIDENAV CONTENT -->
|
||||||
|
|
||||||
|
|
@ -65,4 +67,4 @@
|
||||||
|
|
||||||
</mat-sidenav-container>
|
</mat-sidenav-container>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -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,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()
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
|
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
|
||||||
|
|
||||||
<!-- SIDENAV HEADER -->
|
<!-- 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>
|
<h2>Sidenav header</h2>
|
||||||
</div>
|
</div>
|
||||||
<!-- / SIDENAV HEADER -->
|
<!-- / SIDENAV HEADER -->
|
||||||
|
|
|
||||||
|
|
@ -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,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()
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -49,14 +49,16 @@
|
||||||
fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
|
fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
|
||||||
|
|
||||||
<!-- SIDENAV HEADER -->
|
<!-- 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>
|
<h2>Sidenav header</h2>
|
||||||
</div>
|
</div>
|
||||||
<!-- / SIDENAV HEADER -->
|
<!-- / SIDENAV HEADER -->
|
||||||
|
|
||||||
<!-- SIDENAV CONTENT -->
|
<!-- SIDENAV CONTENT -->
|
||||||
<div class="content p-24" fusePerfectScrollbar>
|
<div class="content p-24" fusePerfectScrollbar>
|
||||||
|
|
||||||
<fuse-demo-sidenav></fuse-demo-sidenav>
|
<fuse-demo-sidenav></fuse-demo-sidenav>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- / SIDENAV CONTENT -->
|
<!-- / SIDENAV CONTENT -->
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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,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()
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -49,14 +49,16 @@
|
||||||
fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
|
fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
|
||||||
|
|
||||||
<!-- SIDENAV HEADER -->
|
<!-- 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>
|
<h2>Sidenav header</h2>
|
||||||
</div>
|
</div>
|
||||||
<!-- / SIDENAV HEADER -->
|
<!-- / SIDENAV HEADER -->
|
||||||
|
|
||||||
<!-- SIDENAV CONTENT -->
|
<!-- SIDENAV CONTENT -->
|
||||||
<div class="content p-24" fusePerfectScrollbar>
|
<div class="content p-24" fusePerfectScrollbar>
|
||||||
|
|
||||||
<fuse-demo-sidenav></fuse-demo-sidenav>
|
<fuse-demo-sidenav></fuse-demo-sidenav>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<!-- / SIDENAV CONTENT -->
|
<!-- / SIDENAV CONTENT -->
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,9 +5,13 @@ import { FuseDemoModule } from '../../../../core/components/demo/demo.module';
|
||||||
import { FuseCardedFullWidthComponent } from './carded/fullwidth/fullwidth.component';
|
import { FuseCardedFullWidthComponent } from './carded/fullwidth/fullwidth.component';
|
||||||
import { FuseCardedFullWidth2Component } from './carded/fullwidth-2/fullwidth-2.component';
|
import { FuseCardedFullWidth2Component } from './carded/fullwidth-2/fullwidth-2.component';
|
||||||
import { FuseCardedLeftSidenavComponent } from './carded/left-sidenav/left-sidenav.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 { 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 { 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 { 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 { FuseSimpleFullWidthComponent } from './simple/fullwidth/fullwidth.component';
|
||||||
import { FuseSimpleLeftSidenavComponent } from './simple/left-sidenav/left-sidenav.component';
|
import { FuseSimpleLeftSidenavComponent } from './simple/left-sidenav/left-sidenav.component';
|
||||||
import { FuseSimpleLeftSidenav2Component } from './simple/left-sidenav-2/left-sidenav-2.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',
|
path : 'ui/page-layouts/carded/left-sidenav',
|
||||||
component: FuseCardedLeftSidenavComponent
|
component: FuseCardedLeftSidenavComponent
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path : 'ui/page-layouts/carded/left-sidenav-tabbed',
|
||||||
|
component: FuseCardedLeftSidenavTabbedComponent
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path : 'ui/page-layouts/carded/left-sidenav-2',
|
path : 'ui/page-layouts/carded/left-sidenav-2',
|
||||||
component: FuseCardedLeftSidenav2Component
|
component: FuseCardedLeftSidenav2Component
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path : 'ui/page-layouts/carded/left-sidenav-2-tabbed',
|
||||||
|
component: FuseCardedLeftSidenav2TabbedComponent
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path : 'ui/page-layouts/carded/right-sidenav',
|
path : 'ui/page-layouts/carded/right-sidenav',
|
||||||
component: FuseCardedRightSidenavComponent
|
component: FuseCardedRightSidenavComponent
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path : 'ui/page-layouts/carded/right-sidenav-tabbed',
|
||||||
|
component: FuseCardedRightSidenavTabbedComponent
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path : 'ui/page-layouts/carded/right-sidenav-2',
|
path : 'ui/page-layouts/carded/right-sidenav-2',
|
||||||
component: FuseCardedRightSidenav2Component
|
component: FuseCardedRightSidenav2Component
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path : 'ui/page-layouts/carded/right-sidenav-2-tabbed',
|
||||||
|
component: FuseCardedRightSidenav2TabbedComponent
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path : 'ui/page-layouts/simple/full-width',
|
path : 'ui/page-layouts/simple/full-width',
|
||||||
component: FuseSimpleFullWidthComponent
|
component: FuseSimpleFullWidthComponent
|
||||||
|
|
@ -91,9 +111,13 @@ const routes: Routes = [
|
||||||
FuseCardedFullWidthComponent,
|
FuseCardedFullWidthComponent,
|
||||||
FuseCardedFullWidth2Component,
|
FuseCardedFullWidth2Component,
|
||||||
FuseCardedLeftSidenavComponent,
|
FuseCardedLeftSidenavComponent,
|
||||||
|
FuseCardedLeftSidenavTabbedComponent,
|
||||||
FuseCardedLeftSidenav2Component,
|
FuseCardedLeftSidenav2Component,
|
||||||
|
FuseCardedLeftSidenav2TabbedComponent,
|
||||||
FuseCardedRightSidenavComponent,
|
FuseCardedRightSidenavComponent,
|
||||||
|
FuseCardedRightSidenavTabbedComponent,
|
||||||
FuseCardedRightSidenav2Component,
|
FuseCardedRightSidenav2Component,
|
||||||
|
FuseCardedRightSidenav2TabbedComponent,
|
||||||
FuseSimpleFullWidthComponent,
|
FuseSimpleFullWidthComponent,
|
||||||
FuseSimpleLeftSidenavComponent,
|
FuseSimpleLeftSidenavComponent,
|
||||||
FuseSimpleLeftSidenav2Component,
|
FuseSimpleLeftSidenav2Component,
|
||||||
|
|
|
||||||
|
|
@ -330,23 +330,47 @@ export class NavigationModel
|
||||||
'type' : 'item',
|
'type' : 'item',
|
||||||
'url' : '/ui/page-layouts/carded/left-sidenav'
|
'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',
|
'id' : 'left-sidenav-2',
|
||||||
'title': 'Left Sidenav 2',
|
'title': 'Left Sidenav 2',
|
||||||
'type' : 'item',
|
'type' : 'item',
|
||||||
'url' : '/ui/page-layouts/carded/left-sidenav-2'
|
'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',
|
'id' : 'right-sidenav',
|
||||||
'title': 'Right Sidenav',
|
'title': 'Right Sidenav',
|
||||||
'type' : 'item',
|
'type' : 'item',
|
||||||
'url' : '/ui/page-layouts/carded/right-sidenav'
|
'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',
|
'id' : 'right-sidenav-2',
|
||||||
'title': 'Right Sidenav 2',
|
'title': 'Right Sidenav 2',
|
||||||
'type' : 'item',
|
'type' : 'item',
|
||||||
'url' : '/ui/page-layouts/carded/right-sidenav-2'
|
'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'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user