mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 12:35:07 +00:00
Changed layout names to make them easier to understand
New navigation structure for documentation and Angular Material elements
This commit is contained in:
parent
a6a7442607
commit
507fe97e84
|
@ -18,25 +18,30 @@
|
||||||
<h2>Layout Styles</h2>
|
<h2>Layout Styles</h2>
|
||||||
|
|
||||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="style">
|
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="style">
|
||||||
<mat-radio-button class="mb-12" value="vertical-layout-1-content-scroll">
|
|
||||||
Vertical Layout #1 - Content Scroll
|
<mat-radio-button class="mb-12" value="vertical-layout-1">
|
||||||
</mat-radio-button>
|
Vertical Layout #1
|
||||||
<mat-radio-button class="mb-12" value="vertical-layout-1-body-scroll">
|
|
||||||
Vertical Layout #1 - Body Scroll
|
|
||||||
</mat-radio-button>
|
</mat-radio-button>
|
||||||
|
|
||||||
<mat-radio-button class="mb-12" value="vertical-layout-2">
|
<mat-radio-button class="mb-12" value="vertical-layout-2">
|
||||||
Vertical Layout #2
|
Vertical Layout #2
|
||||||
</mat-radio-button>
|
</mat-radio-button>
|
||||||
|
|
||||||
|
<mat-radio-button class="mb-12" value="vertical-layout-3">
|
||||||
|
Vertical Layout #3
|
||||||
|
</mat-radio-button>
|
||||||
|
|
||||||
<mat-radio-button class="mb-12" value="horizontal-layout-1">
|
<mat-radio-button class="mb-12" value="horizontal-layout-1">
|
||||||
Horizontal Layout #1
|
Horizontal Layout #1
|
||||||
</mat-radio-button>
|
</mat-radio-button>
|
||||||
|
|
||||||
</mat-radio-group>
|
</mat-radio-group>
|
||||||
|
|
||||||
<!-- DIFFERENT FORMS BASED ON LAYOUT STYLES -->
|
<!-- DIFFERENT FORMS BASED ON LAYOUT STYLES -->
|
||||||
<ng-container [ngSwitch]="fuseConfig.layout.style">
|
<ng-container [ngSwitch]="fuseConfig.layout.style">
|
||||||
|
|
||||||
<!-- VERTICAL LAYOUT #1 - CONTENT SCROLL -->
|
<!-- VERTICAL LAYOUT #1 -->
|
||||||
<ng-container *ngSwitchCase="'vertical-layout-1-content-scroll'">
|
<ng-container *ngSwitchCase="'vertical-layout-1'">
|
||||||
|
|
||||||
<!-- LAYOUT WIDTH -->
|
<!-- LAYOUT WIDTH -->
|
||||||
<div class="group mt-32">
|
<div class="group mt-32">
|
||||||
|
@ -108,79 +113,6 @@
|
||||||
|
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<!-- VERTICAL LAYOUT #1 - BODY SCROLL -->
|
|
||||||
<ng-container *ngSwitchCase="'vertical-layout-1-body-scroll'">
|
|
||||||
|
|
||||||
<!-- LAYOUT WIDTH -->
|
|
||||||
<div class="group mt-32">
|
|
||||||
|
|
||||||
<h2>Layout Width</h2>
|
|
||||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="width">
|
|
||||||
<mat-radio-button class="mb-12" value="fullwidth">Fullwidth</mat-radio-button>
|
|
||||||
<mat-radio-button class="mb-12" value="boxed">Boxed</mat-radio-button>
|
|
||||||
</mat-radio-group>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- NAVBAR -->
|
|
||||||
<div class="group" formGroupName="navbar">
|
|
||||||
|
|
||||||
<h2>Navbar</h2>
|
|
||||||
|
|
||||||
<mat-slide-toggle formControlName="hidden">
|
|
||||||
Hide
|
|
||||||
</mat-slide-toggle>
|
|
||||||
|
|
||||||
<mat-slide-toggle class="mt-24" formControlName="folded">
|
|
||||||
Folded
|
|
||||||
</mat-slide-toggle>
|
|
||||||
|
|
||||||
<h3 class="mt-24">Position:</h3>
|
|
||||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
|
|
||||||
<mat-radio-button class="mb-16" value="left">Left</mat-radio-button>
|
|
||||||
<mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
|
|
||||||
</mat-radio-group>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- TOOLBAR -->
|
|
||||||
<div class="group" formGroupName="toolbar">
|
|
||||||
|
|
||||||
<h2>Toolbar</h2>
|
|
||||||
|
|
||||||
<mat-slide-toggle formControlName="hidden">
|
|
||||||
Hide
|
|
||||||
</mat-slide-toggle>
|
|
||||||
|
|
||||||
<h3 class="mt-24">Position:</h3>
|
|
||||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
|
|
||||||
<mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
|
|
||||||
<mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
|
|
||||||
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
|
|
||||||
</mat-radio-group>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- FOOTER -->
|
|
||||||
<div class="group" formGroupName="footer">
|
|
||||||
|
|
||||||
<h2>Footer</h2>
|
|
||||||
|
|
||||||
<mat-slide-toggle formControlName="hidden">
|
|
||||||
Hide
|
|
||||||
</mat-slide-toggle>
|
|
||||||
|
|
||||||
<h3 class="mt-24">Position:</h3>
|
|
||||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
|
|
||||||
<mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
|
|
||||||
<mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
|
|
||||||
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
|
|
||||||
</mat-radio-group>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<!-- VERTICAL LAYOUT #2 -->
|
<!-- VERTICAL LAYOUT #2 -->
|
||||||
<ng-container *ngSwitchCase="'vertical-layout-2'">
|
<ng-container *ngSwitchCase="'vertical-layout-2'">
|
||||||
|
|
||||||
|
@ -216,6 +148,79 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- TOOLBAR -->
|
||||||
|
<div class="group" formGroupName="toolbar">
|
||||||
|
|
||||||
|
<h2>Toolbar</h2>
|
||||||
|
|
||||||
|
<mat-slide-toggle formControlName="hidden">
|
||||||
|
Hide
|
||||||
|
</mat-slide-toggle>
|
||||||
|
|
||||||
|
<h3 class="mt-24">Position:</h3>
|
||||||
|
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
|
||||||
|
<mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
|
||||||
|
<mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
|
||||||
|
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
|
||||||
|
</mat-radio-group>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- FOOTER -->
|
||||||
|
<div class="group" formGroupName="footer">
|
||||||
|
|
||||||
|
<h2>Footer</h2>
|
||||||
|
|
||||||
|
<mat-slide-toggle formControlName="hidden">
|
||||||
|
Hide
|
||||||
|
</mat-slide-toggle>
|
||||||
|
|
||||||
|
<h3 class="mt-24">Position:</h3>
|
||||||
|
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
|
||||||
|
<mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
|
||||||
|
<mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
|
||||||
|
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
|
||||||
|
</mat-radio-group>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- VERTICAL LAYOUT #3 -->
|
||||||
|
<ng-container *ngSwitchCase="'vertical-layout-3'">
|
||||||
|
|
||||||
|
<!-- LAYOUT WIDTH -->
|
||||||
|
<div class="group mt-32">
|
||||||
|
|
||||||
|
<h2>Layout Width</h2>
|
||||||
|
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="width">
|
||||||
|
<mat-radio-button class="mb-12" value="fullwidth">Fullwidth</mat-radio-button>
|
||||||
|
<mat-radio-button class="mb-12" value="boxed">Boxed</mat-radio-button>
|
||||||
|
</mat-radio-group>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- NAVBAR -->
|
||||||
|
<div class="group" formGroupName="navbar">
|
||||||
|
|
||||||
|
<h2>Navbar</h2>
|
||||||
|
|
||||||
|
<mat-slide-toggle formControlName="hidden">
|
||||||
|
Hide
|
||||||
|
</mat-slide-toggle>
|
||||||
|
|
||||||
|
<mat-slide-toggle class="mt-24" formControlName="folded">
|
||||||
|
Folded
|
||||||
|
</mat-slide-toggle>
|
||||||
|
|
||||||
|
<h3 class="mt-24">Position:</h3>
|
||||||
|
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
|
||||||
|
<mat-radio-button class="mb-16" value="left">Left</mat-radio-button>
|
||||||
|
<mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
|
||||||
|
</mat-radio-group>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- TOOLBAR -->
|
<!-- TOOLBAR -->
|
||||||
<div class="group" formGroupName="toolbar">
|
<div class="group" formGroupName="toolbar">
|
||||||
|
|
||||||
|
|
|
@ -123,6 +123,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
||||||
'id' : 'custom-function',
|
'id' : 'custom-function',
|
||||||
'title' : 'Custom Function',
|
'title' : 'Custom Function',
|
||||||
'type' : 'group',
|
'type' : 'group',
|
||||||
|
'icon' : 'settings',
|
||||||
'children': [
|
'children': [
|
||||||
{
|
{
|
||||||
'id' : 'customize',
|
'id' : 'customize',
|
||||||
|
@ -167,8 +168,8 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
||||||
{
|
{
|
||||||
switch ( value )
|
switch ( value )
|
||||||
{
|
{
|
||||||
// Vertical Layout #1 - Content scroll
|
// Vertical Layout #1
|
||||||
case 'vertical-layout-1-content-scroll':
|
case 'vertical-layout-1':
|
||||||
{
|
{
|
||||||
this.form.patchValue({
|
this.form.patchValue({
|
||||||
layout: {
|
layout: {
|
||||||
|
@ -195,36 +196,36 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Vertical Layout #1 - Body scroll
|
|
||||||
case 'vertical-layout-1-body-scroll':
|
|
||||||
{
|
|
||||||
this.form.patchValue({
|
|
||||||
layout: {
|
|
||||||
width : 'fullwidth',
|
|
||||||
navbar : {
|
|
||||||
hidden : false,
|
|
||||||
position : 'left',
|
|
||||||
folded : false,
|
|
||||||
background: 'mat-fuse-dark-700-bg'
|
|
||||||
},
|
|
||||||
toolbar: {
|
|
||||||
hidden : false,
|
|
||||||
position : 'below',
|
|
||||||
background: 'mat-white-500-bg'
|
|
||||||
},
|
|
||||||
footer : {
|
|
||||||
hidden : false,
|
|
||||||
position : 'below',
|
|
||||||
background: 'mat-fuse-dark-900-bg'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Vertical Layout #2
|
// Vertical Layout #2
|
||||||
case 'vertical-layout-2':
|
case 'vertical-layout-2':
|
||||||
|
{
|
||||||
|
this.form.patchValue({
|
||||||
|
layout: {
|
||||||
|
width : 'fullwidth',
|
||||||
|
navbar : {
|
||||||
|
hidden : false,
|
||||||
|
position : 'left',
|
||||||
|
folded : false,
|
||||||
|
background: 'mat-fuse-dark-700-bg'
|
||||||
|
},
|
||||||
|
toolbar: {
|
||||||
|
hidden : false,
|
||||||
|
position : 'below',
|
||||||
|
background: 'mat-white-500-bg'
|
||||||
|
},
|
||||||
|
footer : {
|
||||||
|
hidden : false,
|
||||||
|
position : 'below',
|
||||||
|
background: 'mat-fuse-dark-900-bg'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vertical Layout #3
|
||||||
|
case 'vertical-layout-3':
|
||||||
{
|
{
|
||||||
this.form.patchValue({
|
this.form.patchValue({
|
||||||
layout: {
|
layout: {
|
||||||
|
@ -292,8 +293,4 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
||||||
this._fuseSidebarService.getSidebar(key).toggleOpen();
|
this._fuseSidebarService.getSidebar(key).toggleOpen();
|
||||||
}
|
}
|
||||||
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
|
||||||
// @ Public methods
|
|
||||||
// -----------------------------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,11 +1,6 @@
|
||||||
<!-- VERTICAL LAYOUT 1 - BODY SCROLL -->
|
<!-- VERTICAL LAYOUT 1 -->
|
||||||
<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1-body-scroll'">
|
<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1'">
|
||||||
<vertical-layout-1-body-scroll></vertical-layout-1-body-scroll>
|
<vertical-layout-1></vertical-layout-1>
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<!-- VERTICAL LAYOUT 1 - CONTENT SCROLL -->
|
|
||||||
<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-1-content-scroll'">
|
|
||||||
<vertical-layout-1-content-scroll></vertical-layout-1-content-scroll>
|
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<!-- VERTICAL LAYOUT 2 -->
|
<!-- VERTICAL LAYOUT 2 -->
|
||||||
|
@ -13,6 +8,11 @@
|
||||||
<vertical-layout-2></vertical-layout-2>
|
<vertical-layout-2></vertical-layout-2>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- VERTICAL LAYOUT 3 -->
|
||||||
|
<ng-container *ngIf="fuseConfig.layout.style === 'vertical-layout-3'">
|
||||||
|
<vertical-layout-3></vertical-layout-3>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
<!-- HORIZONTAL LAYOUT 1 -->
|
<!-- HORIZONTAL LAYOUT 1 -->
|
||||||
<ng-container *ngIf="fuseConfig.layout.style === 'horizontal-layout-1'">
|
<ng-container *ngIf="fuseConfig.layout.style === 'horizontal-layout-1'">
|
||||||
<horizontal-layout-1></horizontal-layout-1>
|
<horizontal-layout-1></horizontal-layout-1>
|
||||||
|
|
|
@ -10,7 +10,7 @@ import { FuseConfig } from '@fuse/types';
|
||||||
|
|
||||||
export const fuseConfig: FuseConfig = {
|
export const fuseConfig: FuseConfig = {
|
||||||
layout : {
|
layout : {
|
||||||
style : 'vertical-layout-1-content-scroll',
|
style : 'vertical-layout-1',
|
||||||
width : 'fullwidth',
|
width : 'fullwidth',
|
||||||
navbar : {
|
navbar : {
|
||||||
hidden : false,
|
hidden : false,
|
||||||
|
|
|
@ -1,26 +1,23 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
|
|
||||||
import { VerticalLayout1BodyScrollModule } from 'app/layout/vertical/layout-1/body-scroll/body-scroll.module';
|
import { VerticalLayout1Module } from 'app/layout/vertical/layout-1/layout-1.module';
|
||||||
import { VerticalLayout1ContentScrollModule } from 'app/layout/vertical/layout-1/content-scroll/content-scroll.module';
|
|
||||||
|
|
||||||
import { VerticalLayout2Module } from 'app/layout/vertical/layout-2/layout-2.module';
|
import { VerticalLayout2Module } from 'app/layout/vertical/layout-2/layout-2.module';
|
||||||
|
import { VerticalLayout3Module } from 'app/layout/vertical/layout-3/layout-3.module';
|
||||||
|
|
||||||
import { HorizontalLayout1Module } from 'app/layout/horizontal/layout-1/layout-1.module';
|
import { HorizontalLayout1Module } from 'app/layout/horizontal/layout-1/layout-1.module';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
VerticalLayout1BodyScrollModule,
|
VerticalLayout1Module,
|
||||||
VerticalLayout1ContentScrollModule,
|
|
||||||
|
|
||||||
VerticalLayout2Module,
|
VerticalLayout2Module,
|
||||||
|
VerticalLayout3Module,
|
||||||
|
|
||||||
HorizontalLayout1Module
|
HorizontalLayout1Module
|
||||||
],
|
],
|
||||||
exports: [
|
exports: [
|
||||||
VerticalLayout1BodyScrollModule,
|
VerticalLayout1Module,
|
||||||
VerticalLayout1ContentScrollModule,
|
|
||||||
|
|
||||||
VerticalLayout2Module,
|
VerticalLayout2Module,
|
||||||
|
VerticalLayout3Module,
|
||||||
|
|
||||||
HorizontalLayout1Module
|
HorizontalLayout1Module
|
||||||
]
|
]
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
@import "src/@fuse/scss/fuse";
|
@import "src/@fuse/scss/fuse";
|
||||||
|
|
||||||
vertical-layout-1-content-scroll {
|
vertical-layout-1 {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
width: 100%;
|
width: 100%;
|
|
@ -6,12 +6,12 @@ import { FuseConfigService } from '@fuse/services/config.service';
|
||||||
import { navigation } from 'app/navigation/navigation';
|
import { navigation } from 'app/navigation/navigation';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector : 'vertical-layout-1-body-scroll',
|
selector : 'vertical-layout-1',
|
||||||
templateUrl : './body-scroll.component.html',
|
templateUrl : './layout-1.component.html',
|
||||||
styleUrls : ['./body-scroll.component.scss'],
|
styleUrls : ['./layout-1.component.scss'],
|
||||||
encapsulation: ViewEncapsulation.None
|
encapsulation: ViewEncapsulation.None
|
||||||
})
|
})
|
||||||
export class VerticalLayout1BodyScrollComponent implements OnInit, OnDestroy
|
export class VerticalLayout1Component implements OnInit, OnDestroy
|
||||||
{
|
{
|
||||||
fuseConfig: any;
|
fuseConfig: any;
|
||||||
navigation: any;
|
navigation: any;
|
|
@ -10,11 +10,11 @@ import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
||||||
import { QuickPanelModule } from 'app/layout/components/quick-panel/quick-panel.module';
|
import { QuickPanelModule } from 'app/layout/components/quick-panel/quick-panel.module';
|
||||||
import { ToolbarModule } from 'app/layout/components/toolbar/toolbar.module';
|
import { ToolbarModule } from 'app/layout/components/toolbar/toolbar.module';
|
||||||
|
|
||||||
import { VerticalLayout1BodyScrollComponent } from 'app/layout/vertical/layout-1/body-scroll/body-scroll.component';
|
import { VerticalLayout1Component } from 'app/layout/vertical/layout-1/layout-1.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
VerticalLayout1BodyScrollComponent
|
VerticalLayout1Component
|
||||||
],
|
],
|
||||||
imports : [
|
imports : [
|
||||||
RouterModule,
|
RouterModule,
|
||||||
|
@ -29,9 +29,9 @@ import { VerticalLayout1BodyScrollComponent } from 'app/layout/vertical/layout-1
|
||||||
ToolbarModule
|
ToolbarModule
|
||||||
],
|
],
|
||||||
exports : [
|
exports : [
|
||||||
VerticalLayout1BodyScrollComponent
|
VerticalLayout1Component
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class VerticalLayout1BodyScrollModule
|
export class VerticalLayout1Module
|
||||||
{
|
{
|
||||||
}
|
}
|
|
@ -23,12 +23,26 @@
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<!-- / NAVBAR: Left -->
|
<!-- / NAVBAR: Left -->
|
||||||
|
|
||||||
|
<div id="container-3" class="container">
|
||||||
|
|
||||||
|
<!-- TOOLBAR: Below -->
|
||||||
|
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below'">
|
||||||
|
<ng-container *ngTemplateOutlet="toolbar"></ng-container>
|
||||||
|
</ng-container>
|
||||||
|
<!-- / TOOLBAR: Below -->
|
||||||
|
|
||||||
<!-- CONTENT -->
|
<!-- CONTENT -->
|
||||||
<content
|
<content></content>
|
||||||
[ngClass]="{'ml-32':fuseConfig.layout.navbar.position === 'left', 'mr-32':fuseConfig.layout.navbar.position === 'right'}">
|
|
||||||
</content>
|
|
||||||
<!-- / CONTENT -->
|
<!-- / CONTENT -->
|
||||||
|
|
||||||
|
<!-- FOOTER: Below -->
|
||||||
|
<ng-container *ngIf="fuseConfig.layout.footer.position === 'below'">
|
||||||
|
<ng-container *ngTemplateOutlet="footer"></ng-container>
|
||||||
|
</ng-container>
|
||||||
|
<!-- / FOOTER: Below -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- NAVBAR: Right -->
|
<!-- NAVBAR: Right -->
|
||||||
<ng-container *ngIf="fuseConfig.layout.navbar.position === 'right'">
|
<ng-container *ngIf="fuseConfig.layout.navbar.position === 'right'">
|
||||||
<ng-container *ngTemplateOutlet="rightNavbar"></ng-container>
|
<ng-container *ngTemplateOutlet="rightNavbar"></ng-container>
|
||||||
|
|
|
@ -39,15 +39,14 @@ vertical-layout-2 {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 0;
|
|
||||||
padding: 32px;
|
|
||||||
|
|
||||||
// Content component
|
// Container 3
|
||||||
> content {
|
> .container {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
|
flex-direction: column;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
|
||||||
@include mat-elevation(3);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,26 +23,12 @@
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<!-- / NAVBAR: Left -->
|
<!-- / NAVBAR: Left -->
|
||||||
|
|
||||||
<div id="container-3" class="container">
|
|
||||||
|
|
||||||
<!-- TOOLBAR: Below -->
|
|
||||||
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'below'">
|
|
||||||
<ng-container *ngTemplateOutlet="toolbar"></ng-container>
|
|
||||||
</ng-container>
|
|
||||||
<!-- / TOOLBAR: Below -->
|
|
||||||
|
|
||||||
<!-- CONTENT -->
|
<!-- CONTENT -->
|
||||||
<content></content>
|
<content
|
||||||
|
[ngClass]="{'ml-32':fuseConfig.layout.navbar.position === 'left', 'mr-32':fuseConfig.layout.navbar.position === 'right'}">
|
||||||
|
</content>
|
||||||
<!-- / CONTENT -->
|
<!-- / CONTENT -->
|
||||||
|
|
||||||
<!-- FOOTER: Below -->
|
|
||||||
<ng-container *ngIf="fuseConfig.layout.footer.position === 'below'">
|
|
||||||
<ng-container *ngTemplateOutlet="footer"></ng-container>
|
|
||||||
</ng-container>
|
|
||||||
<!-- / FOOTER: Below -->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- NAVBAR: Right -->
|
<!-- NAVBAR: Right -->
|
||||||
<ng-container *ngIf="fuseConfig.layout.navbar.position === 'right'">
|
<ng-container *ngIf="fuseConfig.layout.navbar.position === 'right'">
|
||||||
<ng-container *ngTemplateOutlet="rightNavbar"></ng-container>
|
<ng-container *ngTemplateOutlet="rightNavbar"></ng-container>
|
|
@ -1,6 +1,6 @@
|
||||||
@import "src/@fuse/scss/fuse";
|
@import "../../../../@fuse/scss/fuse";
|
||||||
|
|
||||||
vertical-layout-1-body-scroll {
|
vertical-layout-3 {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -39,14 +39,15 @@ vertical-layout-1-body-scroll {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
// Container 3
|
|
||||||
> .container {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
flex-direction: column;
|
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
padding: 32px;
|
||||||
|
|
||||||
|
// Content component
|
||||||
|
> content {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
|
@include mat-elevation(3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -6,12 +6,12 @@ import { FuseConfigService } from '@fuse/services/config.service';
|
||||||
import { navigation } from 'app/navigation/navigation';
|
import { navigation } from 'app/navigation/navigation';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector : 'vertical-layout-1-content-scroll',
|
selector : 'vertical-layout-3',
|
||||||
templateUrl : './content-scroll.component.html',
|
templateUrl : './layout-3.component.html',
|
||||||
styleUrls : ['./content-scroll.component.scss'],
|
styleUrls : ['./layout-3.component.scss'],
|
||||||
encapsulation: ViewEncapsulation.None
|
encapsulation: ViewEncapsulation.None
|
||||||
})
|
})
|
||||||
export class VerticalLayout1ContentScrollComponent implements OnInit, OnDestroy
|
export class VerticalLayout3Component implements OnInit, OnDestroy
|
||||||
{
|
{
|
||||||
fuseConfig: any;
|
fuseConfig: any;
|
||||||
navigation: any;
|
navigation: any;
|
|
@ -1,7 +1,7 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { RouterModule } from '@angular/router';
|
import { RouterModule } from '@angular/router';
|
||||||
|
|
||||||
import { FuseSidebarModule } from '@fuse/components';
|
import { FuseSidebarModule } from '@fuse/components/index';
|
||||||
import { FuseSharedModule } from '@fuse/shared.module';
|
import { FuseSharedModule } from '@fuse/shared.module';
|
||||||
|
|
||||||
import { ContentModule } from 'app/layout/components/content/content.module';
|
import { ContentModule } from 'app/layout/components/content/content.module';
|
||||||
|
@ -10,11 +10,11 @@ import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
||||||
import { QuickPanelModule } from 'app/layout/components/quick-panel/quick-panel.module';
|
import { QuickPanelModule } from 'app/layout/components/quick-panel/quick-panel.module';
|
||||||
import { ToolbarModule } from 'app/layout/components/toolbar/toolbar.module';
|
import { ToolbarModule } from 'app/layout/components/toolbar/toolbar.module';
|
||||||
|
|
||||||
import { VerticalLayout1ContentScrollComponent } from 'app/layout/vertical/layout-1/content-scroll/content-scroll.component';
|
import { VerticalLayout3Component } from 'app/layout/vertical/layout-3/layout-3.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
VerticalLayout1ContentScrollComponent
|
VerticalLayout3Component
|
||||||
],
|
],
|
||||||
imports : [
|
imports : [
|
||||||
RouterModule,
|
RouterModule,
|
||||||
|
@ -29,9 +29,9 @@ import { VerticalLayout1ContentScrollComponent } from 'app/layout/vertical/layou
|
||||||
ToolbarModule
|
ToolbarModule
|
||||||
],
|
],
|
||||||
exports : [
|
exports : [
|
||||||
VerticalLayout1ContentScrollComponent
|
VerticalLayout3Component
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class VerticalLayout1ContentScrollModule
|
export class VerticalLayout3Module
|
||||||
{
|
{
|
||||||
}
|
}
|
|
@ -571,9 +571,10 @@ export const navigation: FuseNavigation[] = [
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id : 'angular-material-elements-elements',
|
id : 'angular-material-elements',
|
||||||
title : 'Angular Material Elements',
|
title : 'Angular Material Elements',
|
||||||
type : 'group',
|
type : 'group',
|
||||||
|
icon : 'layers',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
id : 'form-controls',
|
id : 'form-controls',
|
||||||
|
@ -838,6 +839,7 @@ export const navigation: FuseNavigation[] = [
|
||||||
{
|
{
|
||||||
id : 'documentation',
|
id : 'documentation',
|
||||||
title : 'Documentation',
|
title : 'Documentation',
|
||||||
|
icon : 'import_contacts',
|
||||||
type : 'group',
|
type : 'group',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
|
|
Loading…
Reference in New Issue
Block a user