Add section scroll component
This commit is contained in:
parent
83a9f259bf
commit
68b0b22754
|
@ -0,0 +1,10 @@
|
|||
/* hide scrollbar but allow scrolling */
|
||||
*[scroll] {
|
||||
-ms-overflow-style: none; /* for Internet Explorer, Edge */
|
||||
scrollbar-width: none; /* for Firefox */
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
*[scroll]::-webkit-scrollbar {
|
||||
display: none; /* for Chrome, Safari, and Opera */
|
||||
}
|
|
@ -0,0 +1,49 @@
|
|||
import {Component, HostListener, Input, OnInit, ViewEncapsulation} from "@angular/core";
|
||||
|
||||
|
||||
/**
|
||||
* <section-scroll [customClass]="'optional classes for grid e.g. uk-flex-bottom'">
|
||||
* <div fixed>...</div>
|
||||
* <div scroll>...</div> # use uk-flex-first to change order
|
||||
* </section-scroll>
|
||||
*
|
||||
* */
|
||||
@Component({
|
||||
selector: 'section-scroll',
|
||||
template: `
|
||||
<div class="uk-grid" style="align-items: self-start" [ngClass]="customClass">
|
||||
<ng-content select="[fixed]"></ng-content>
|
||||
<ng-content select="[scroll]"></ng-content>
|
||||
</div>
|
||||
`,
|
||||
styleUrls: ['section-scroll.component.css'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class SectionScrollComponent implements OnInit {
|
||||
|
||||
@Input()
|
||||
public customClass = null;
|
||||
private fixed: HTMLElement;
|
||||
private scroll: HTMLElement;
|
||||
|
||||
constructor() {
|
||||
}
|
||||
|
||||
@HostListener('window:resize', ['$event'])
|
||||
onResize(event) {
|
||||
this.fixed = document.querySelector('[fixed]');
|
||||
this.scroll = document.querySelector('[scroll]');
|
||||
this.scroll.setAttribute('style','max-height: ' + this.height + 'px;');
|
||||
}
|
||||
|
||||
|
||||
ngOnInit() {
|
||||
this.fixed = document.querySelector('[fixed]');
|
||||
this.scroll = document.querySelector('[scroll]');
|
||||
this.scroll.setAttribute('style','max-height: ' + this.height + 'px;');
|
||||
}
|
||||
|
||||
get height():number {
|
||||
return this.fixed?this.fixed.offsetHeight:0;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,10 @@
|
|||
import {NgModule} from "@angular/core";
|
||||
import {SectionScrollComponent} from "./section-scroll.component";
|
||||
import {CommonModule} from "@angular/common";
|
||||
|
||||
@NgModule({
|
||||
imports: [CommonModule],
|
||||
declarations: [SectionScrollComponent],
|
||||
exports: [SectionScrollComponent]
|
||||
})
|
||||
export class SectionScrollModule {}
|
Loading…
Reference in New Issue