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