feat(layout): 新增页面布局示例

stbui · May 21, 2018 · 2cd453a · 2cd453a
1 parent 7b60d18
commit 2cd453a
Show file tree

Hide file tree

Showing 11 changed files with 563 additions and 11 deletions.
diff --git a/src/app/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html b/src/app/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html
@@ -0,0 +1,158 @@
+<div class="page-layout">
+  <div class="top-bg"></div>
+
+  <mat-sidenav-container>
+    <mat-sidenav class="sidenav" position="start" opened="true" mode="side" #sidenav>
+      <div class="content">
+        <mat-list>
+          <h3 matSubheader>Sidenav Demo</h3>
+
+          <mat-list-item>
+            <span>Sidenav Item 1</span>
+          </mat-list-item>
+
+          <mat-divider></mat-divider>
+
+          <mat-list-item>
+            <span>Sidenav Item 2</span>
+          </mat-list-item>
+
+          <mat-divider></mat-divider>
+
+          <mat-list-item>
+            <span>Sidenav Item 3</span>
+          </mat-list-item>
+
+          <mat-divider></mat-divider>
+
+          <mat-list-item>
+            <span>Sidenav Item 4</span>
+          </mat-list-item>
+
+          <mat-divider></mat-divider>
+
+          <mat-list-item>
+            <span>Sidenav Item 5</span>
+          </mat-list-item>
+
+          <mat-divider></mat-divider>
+
+          <mat-list-item>
+            <span>Sidenav Item 6</span>
+          </mat-list-item>
+
+          <mat-divider></mat-divider>
+
+          <mat-list-item>
+            <span>Sidenav Item 7</span>
+          </mat-list-item>
+
+          <mat-divider></mat-divider>
+
+          <mat-list-item>
+            <span>Sidenav Item 8</span>
+          </mat-list-item>
+
+          <mat-divider></mat-divider>
+
+          <mat-list-item>
+            <span>Sidenav Item 9</span>
+          </mat-list-item>
+
+          <mat-divider></mat-divider>
+
+          <mat-list-item>
+            <span>Sidenav Item 10</span>
+          </mat-list-item>
+
+          <mat-divider></mat-divider>
+
+          <mat-list-item>
+            <span>Sidenav Item 11</span>
+          </mat-list-item>
+
+          <mat-divider></mat-divider>
+
+          <mat-list-item>
+            <span>Sidenav Item 12</span>
+          </mat-list-item>
+
+          <mat-divider></mat-divider>
+
+          <mat-list-item>
+            <span>Sidenav Item 13</span>
+          </mat-list-item>
+
+          <mat-divider></mat-divider>
+
+          <mat-list-item>
+            <span>Sidenav Item 14</span>
+          </mat-list-item>
+
+          <mat-divider></mat-divider>
+
+          <mat-list-item>
+            <span>Sidenav Item 15</span>
+          </mat-list-item>
+
+          <mat-divider></mat-divider>
+
+          <mat-list-item>
+            <span>Sidenav Item 16</span>
+          </mat-list-item>
+
+        </mat-list>
+      </div>
+    </mat-sidenav>
+
+
+    <div class="wrapper">
+      <div class="header" fxLayout="row" fxLayoutAlign="start center"></div>
+      <div class="card">
+
+        <!-- <div class="toolbar" fxLayout="row" fxLayoutAlign="start center">
+          <button mat-icon-button (click)="sidenav.toggle()">
+            <mat-icon>menu</mat-icon>
+          </button>
+        </div> -->
+
+        <mat-tab-group>
+          <mat-tab label="tab 1">
+            <div class="content">
+              <app-demo-content></app-demo-content>
+            </div>
+          </mat-tab>
+          <mat-tab label="tab 2">
+            <div class="content">
+              <app-demo-content></app-demo-content>
+            </div>
+          </mat-tab>
+          <mat-tab label="tab 3">
+            <div class="content">
+              <app-demo-content></app-demo-content>
+            </div>
+          </mat-tab>
+          <mat-tab label="tab 4">
+            <div class="content">
+              <app-demo-content></app-demo-content>
+            </div>
+          </mat-tab>
+          <mat-tab label="tab 5">
+            <div class="content">
+              <app-demo-content></app-demo-content>
+            </div>
+          </mat-tab>
+          <mat-tab label="tab 6">
+            <div class="content">
+              <app-demo-content></app-demo-content>
+            </div>
+          </mat-tab>
+        </mat-tab-group>
+
+      </div>
+    </div>
+
+  </mat-sidenav-container>
+
+
+</div>
diff --git a/src/app/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.scss b/src/app/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.scss
@@ -0,0 +1,88 @@
+:host {
+    display: flex;
+    flex: 1;
+    width: 100%;
+    min-width: 100%;
+    // 
+    // height: 100%;
+  }
+
+  .page-layout {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 auto;
+    width: 100%;
+    min-width: 100%;
+    position: relative;
+  }
+
+  .top-bg {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    left: 0;
+    height: 200px;
+    background: #c471f3;
+    background-size: cover;
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    position: relative;
+    z-index: 2;
+    padding: 0 32px;
+    width: 100%;
+    min-width: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    box-sizing: border-box;
+    >.header {
+      height: 136px;
+      min-height: 136px;
+      max-height: 136px;
+    }
+    >.card {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      overflow: hidden;
+      background: #fff;
+      box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .2), 0 7px 10px 1px rgba(0, 0, 0, .14), 0 2px 16px 1px rgba(0, 0, 0, .12);
+      .content {
+        display: flex;
+        flex: 1;
+        padding: 24px;
+        overflow: auto
+      }
+    }
+  }
+
+  .toolbar {
+    border-bottom: 1px solid rgba(0, 0, 0, .12);
+    height: 64px;
+    min-height: 64px;
+    max-height: 64px;
+    padding: 0 24px;
+  }
+
+  // left-sidnav
+  .sidenav {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    width: 240px;
+    min-width: 240px;
+    max-width: 240px;
+    height: auto;
+    z-index: 4;
+    overflow-y: hidden;
+    box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
+    .content {
+      padding: 24px;
+      overflow: auto
+    }
+  }
+
diff --git a/src/app/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.spec.ts b/src/app/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LeftSidenavTabbedComponent } from './left-sidenav-tabbed.component';
+
+describe('LeftSidenavTabbedComponent', () => {
+  let component: LeftSidenavTabbedComponent;
+  let fixture: ComponentFixture<LeftSidenavTabbedComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LeftSidenavTabbedComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LeftSidenavTabbedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts b/src/app/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-left-sidenav-tabbed',
+  templateUrl: './left-sidenav-tabbed.component.html',
+  styleUrls: ['./left-sidenav-tabbed.component.scss']
+})
+export class LeftSidenavTabbedComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/page-layouts/carded/left-sidenav/left-sidenav.component.scss b/src/app/page-layouts/carded/left-sidenav/left-sidenav.component.scss
@@ -38,7 +38,6 @@
   max-width: 100%;
   max-height: 100%;
   box-sizing: border-box;
-
   >.header {
     height: 136px;
     min-height: 136px;
@@ -51,6 +50,12 @@
     overflow: hidden;
     background: #fff;
     box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .2), 0 7px 10px 1px rgba(0, 0, 0, .14), 0 2px 16px 1px rgba(0, 0, 0, .12);
+    .content {
+      display: flex;
+      flex: 1;
+      padding: 24px;
+      overflow: auto
+    }
   }
 }
 
@@ -62,12 +67,6 @@
   padding: 0 24px;
 }
 
-.content {
-  display: flex;
-  flex: 1;
-  padding: 24px;
-  overflow: auto
-} 
 // left-sidnav
 .sidenav {
   display: flex;
@@ -80,4 +79,8 @@
   z-index: 4;
   overflow-y: hidden;
   box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
+  .content {
+    padding: 24px;
+    overflow: auto
+  }
 }