Issue691 (#692)

* fixes #691 现在tabs的高度随内容改变，要改成固定高度，内容随高度出滚动条 Change-Id: Idcee13235e600ece8c18d616359b3028847ab437 * optimize Change-Id: I28ea232489d2dc3d39a5b83224d9ed206800a48e
rdkmaster · Aug 16, 2018 · d042acf · d042acf
1 parent 5ad8424
commit d042acf
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 4 deletions.
diff --git a/src/app/demo/tab/basic/demo.component.html b/src/app/demo/tab/basic/demo.component.html
@@ -5,7 +5,7 @@
 
 <!-- start to learn the demo from here -->
 <div class="container">
-    <jigsaw-tabs (selectChange)="testEvent($event)" [selectedIndex]="2">
+    <jigsaw-tabs (selectChange)="testEvent($event)" [selectedIndex]="2" height="200">
         <jigsaw-tab-pane [lazy]="false">
             <div jigsaw-title><span class="fa fa-gift"></span>tab 1</div>
             <ng-template>tab content 1</ng-template>

diff --git a/src/jigsaw/component/tabs/index.ts b/src/jigsaw/component/tabs/index.ts
@@ -8,9 +8,10 @@ import {JigsawTab} from './tab';
 import {JigsawTabPane} from "./tab-pane";
 import {CommonModule} from "@angular/common";
 import {JigsawTabContent, JigsawTabLabel} from "./tab-item";
+import {PerfectScrollbarModule} from "ngx-perfect-scrollbar";
 
 @NgModule({
-    imports: [CommonModule],
+    imports: [CommonModule, PerfectScrollbarModule],
     exports: [JigsawTab, JigsawTabPane],
     declarations: [JigsawTab, JigsawTabPane, JigsawTabLabel, JigsawTabContent],
     providers: [],

diff --git a/src/jigsaw/component/tabs/tab.html b/src/jigsaw/component/tabs/tab.html
@@ -23,7 +23,8 @@
             </div>
         </div>
     </div>
-    <div class="jigsaw-tabs-content" *ngIf="_$tabPanes && _$tabPanes.length > 0">
+    <div class="jigsaw-tabs-content" [perfectScrollbar]="{wheelSpeed: 0.5, wheelPropagation: true}"
+         [style.height]="_$contentHeight">
         <jigsaw-tab-content
             *ngFor="let tab of _$tabPanes; let i = index;"
             [key]="i"

diff --git a/src/jigsaw/component/tabs/tab.scss b/src/jigsaw/component/tabs/tab.scss
@@ -146,6 +146,7 @@ $tab-prefix: #{$jigsaw-prefix}-tabs;
             display: block;
             flex-shrink: 0;
             width: 100%;
+            height: 100%;
             transition: transform 0.5s;
             opacity: 1;
 

diff --git a/src/jigsaw/component/tabs/tab.ts b/src/jigsaw/component/tabs/tab.ts
@@ -24,13 +24,15 @@ import {AbstractJigsawComponent, IDynamicInstantiatable} from "../common";
     host: {
         '[class.jigsaw-tabs-host]': 'true',
         '[style.width]': 'width',
+        '[style.height]': 'height'
     }
 })
 export class JigsawTab extends AbstractJigsawComponent implements AfterViewInit, AfterViewChecked {
 
     constructor(private _cfr: ComponentFactoryResolver,
                 private _changeDetector: ChangeDetectorRef,
-                private _viewContainer: ViewContainerRef) {
+                private _viewContainer: ViewContainerRef,
+                private _elementRef: ElementRef) {
         super()
     }
 
@@ -214,6 +216,20 @@ export class JigsawTab extends AbstractJigsawComponent implements AfterViewInit,
         this.remove.emit(index);
     }
 
+    /**
+     * @internal
+     */
+    public _$contentHeight: string = 'auto';
+
+    ngOnInit() {
+        if(this.height) {
+            setTimeout(() => {
+                // 等待dom渲染
+                this._$contentHeight = this._elementRef.nativeElement.offsetHeight - 46 + 'px';
+            })
+        }
+    }
+
     ngAfterViewInit() {
         if (this.selectedIndex != null) {
             this._handleSelectChange(this.selectedIndex)