NG-KuX UI Component For Angular4

Demo https://coolcross.github.io

---

Select

#### In NgModule
`` typescript
import { KuxSelectModule } from 'ng-kux';
@NgModule({
imports: [
KuxSelectModule
,...
],
declarations: [...]
})
export class SomeModule { }
`

#### In Component Template
` html

`
#### In Component
` typescript
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
` typescript
import { KuxScrollBarModule } from 'ng-kux';
@NgModule({
imports: [
KuxScrollBarModule
,...
],
declarations: [...],
...
})
export class SomeModule { }
`

#### In Component Template
` html

...

`
#### Optional Parameters
Param | Type | Default | description
---------|---------|---------|--------------------------
autoHide | boolean | true | auto hide x&y scroll bar

#### In Parant Component You Can...
` typescript
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
`typescript
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
`html

`


#### 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

$3

#### In NgModule
`typescript
import { KuxScrollModule } from 'ng-kux'
...

@NgModule({
imports: [
KuxScrollModule,
...
],
...
})
export class SomeModule { }
`
#### In Component
`typescript
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
`html



• {{item.name}}



`

---

Pagination

#### In NgModule
`typescript
import { KuxPaginationModule } from 'ng-kux';
@NgModule({
imports: [
CommonModule,
KuxPaginationModule,
....
],
declarations: [...]
})
export class SomeModule { }
`
#### In Component Template
`html

``
#### 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