1.0.0-alpha.52 • Published 7 years ago
ng-kux v1.0.0-alpha.52
NG-KuX UI Component For Angular4
Demo https://coolcross.github.io
Select
In NgModule
import { KuxSelectModule } from 'ng-kux';
@NgModule({
imports: [
KuxSelectModule
,...
],
declarations: [...]
})
export class SomeModule { }
In Component Template
<kux-select [(ngModel)]="selected" [options]="options"></kux-select>
In Component
export class SomeComponent{
public selected = -1;
public options:any[]=[
{
name: "选择下面一项",
value: -1
}, {
name: "第一项",
value: 0
}, {
name: "第二项",
value: 1
}, {
name: "第三项",
value: 2
}, {
name: "第四项",
value: 3
}, {
name: "第五项",
value: 4
}
]
}
Optional Parameters
Param | Type | Default | description |
---|---|---|---|
width | string | 205px | select wdith |
optwdith | string | 205px | option width |
maxHeight | string | null | option max height |
placeholder | string | null | you know it |
disabled | boolean | false | you know it |
ScrollBar
In NgModule
import { KuxScrollBarModule } from 'ng-kux';
@NgModule({
imports: [
KuxScrollBarModule
,...
],
declarations: [...],
...
})
export class SomeModule { }
In Component Template
<kux-scrollbar [autoHide]="true">
...
</kux-scrollbar>
Optional Parameters
Param | Type | Default | description |
---|---|---|---|
autoHide | boolean | true | auto hide x&y scroll bar |
In Parant Component You Can...
import { KuxScrollbarComponent } from 'ng-kux';
@Component({...})
export class ParentComponent implements AfterViewInit {
@ViewChild(KuxScrollbarComponent) private scrollBox: KuxScrollbarComponent
constructor() { }
ngAfterViewInit() {
this.scrollBox.scrollTop=100; //set scrollTop
console.log(this.scrollBox.scrollTop); //get scrollTop
this.scrollBox.scrollLeft=100; //set scrollLeft
console.log(this.scrollBox.scrollLeft); //get scrollLeft
this.scrollBox.isScrollToBottom(); //is scroll box scroll to the bottom
this.scrollBox.isScrollToRight(); //is scroll box scroll to the right
this.scrollBox.refresh(); //refresh scroll bar
}
}
Datepicker
In NgModule
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { KuxDatepickerModule } from 'ng-kux';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [
KuxDatepickerModule
,...
],
declarations: [...],
...
})
export class SomeModule { }
In Component Template
<kux-datepicker [(ngModel)]="data" [panleFmt]="'yyyy年M月d日'" [fmt]="'yyyy-M-d'" [placement]="['bottom','left']" [min]="min" [max]="max" [step]="3"></kux-datepicker>
Optional Parameters
Param | Type | Default | description |
---|---|---|---|
disabled | boolean | false | you know it |
panleFmt | string | MM/dd/yyyy | format Date on panle |
fmt | string | MM/dd/yyyy | format Date on form element |
placement | string | Array | 'bottom','left' | panle placement -bottom | top | left | right |
min | Date | null | Minimum allowed date for selection |
max | Date | null | Maximum allowed date for selection |
step | Number | 3 | 3-pickday 2-pickmonth 1-pickyear |
Scroll
infinite scroll component
In NgModule
import { KuxScrollModule } from 'ng-kux'
...
@NgModule({
imports: [
KuxScrollModule,
...
],
...
})
export class SomeModule { }
In Component
import { KuxScrollComponent } from 'ng-kux/scroll/scroll.component';
...
@Component({
templateUrl: './some.html',
...
})
export class SomeComponent implements OnInit {
@ViewChild(KuxScrollComponent) kuxScroll: KuxScrollComponent;
private AllData:any[] //some big Array
sync(){
this.kuxScroll.sync().then(() => { //synchronize the arr of kuxScroll from AllData
...
})
}
ngOnInit() {
let num = 0;
this.kuxScroll.getData = (begin, length) => {
let list = [];
for (let i = begin; i < begin + length; i++) {
let item = this.AllData[i];
if (item !== undefined) {
list.push(item)
}
}
return list
}
}
}
In Component Template
<kux-scroll>
<ul>
<li *ngFor="let item of kuxScroll.displayD" [kux-scroll-item]="item">{{item.name}}</li>
</ul>
</kux-scroll>
Pagination
In NgModule
import { KuxPaginationModule } from 'ng-kux';
@NgModule({
imports: [
CommonModule,
KuxPaginationModule,
....
],
declarations: [...]
})
export class SomeModule { }
In Component Template
<kux-pagination [total]="total" [limit]=50 [page]=0 [max]=5 (onPage)="showEvent($event)"></kux-pagination>
Optional Parameters
Param | Type | Default | description |
---|---|---|---|
total | number | 0 | Total number of items |
limit | number | 0 | Limit number for pagination size |
page | number | 0 | Current page number (First Page :0) |
max | number | 7 | Ellipses |
1.0.0-alpha.52
7 years ago
1.0.0-alpha.51
7 years ago
1.0.0-alpha.50
7 years ago
1.0.0-alpha.49
7 years ago
1.0.0-alpha.48
7 years ago
1.0.0-alpha.47
7 years ago
1.0.0-alpha.46
7 years ago
1.0.0-alpha.45
7 years ago
1.0.0-alpha.44
7 years ago
1.0.0-alpha.43
7 years ago
1.0.0-alpha.42
7 years ago
1.0.0-alpha.41
7 years ago
1.0.0-alpha.40
7 years ago
1.0.0-alpha.39
7 years ago
1.0.0-alpha.38
7 years ago
1.0.0-alpha.37
7 years ago
1.0.0-alpha.36
7 years ago
1.0.0-alpha.35
7 years ago
1.0.0-alpha.34
7 years ago
1.0.0-alpha.33
7 years ago
1.0.0-alpha.32
7 years ago
1.0.0-alpha.31
7 years ago
1.0.0-alpha.30
7 years ago
1.0.0-alpha.29
7 years ago
1.0.0-alpha.28
7 years ago
1.0.0-alpha.27
7 years ago
1.0.0-alpha.26
7 years ago
1.0.0-alpha.25
7 years ago
1.0.0-alpha.24
7 years ago
1.0.0-alpha.23
7 years ago
1.0.0-alpha.22
7 years ago
1.0.0-alpha.21
7 years ago
1.0.0-alpha.20
7 years ago
1.0.0-alpha.19
7 years ago
1.0.0-alpha.18
7 years ago
1.0.0-alpha.17
7 years ago
1.0.0-alpha.16
7 years ago
1.0.0-alpha.15
7 years ago
1.0.0-alpha.14
7 years ago
1.0.0-alpha.13
7 years ago
1.0.0-alpha.12
7 years ago
1.0.0-alpha.11
7 years ago
1.0.0-alpha.10
7 years ago
1.0.0-alpha.9
7 years ago
1.0.0-alpha.8
7 years ago
1.0.0-alpha.7
7 years ago
1.0.0-alpha.6
7 years ago
1.0.0-alpha.5
7 years ago
1.0.0-alpha.4
7 years ago
1.0.0-alpha.3
7 years ago
1.0.0-alpha.2
7 years ago
1.0.0-alpha.0
7 years ago
1.0.0-alpha.1
7 years ago