ng-kux

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