ngx-wheel-selector
šš¾ A Wheel Selector (or Data Picker) for Angular 7+
This repo uses hiyali's data-picker and is adapted to work with angular 7+
Examples
Examples and demos can be consulted in it's original repo
Note that instalation and implementation may change
Install
yarnĀ addĀ ng-data-picker
or
npmĀ iĀ -SĀ ng-data-picker
Usage
Quick look
app.module.ts
Ā
app.component.ts
app.component.html
āļø Props
name | type | default | explain |
---|---|---|---|
change |
Function |
({gIndex,iIndex})=>{} | Callback after which group's current index changed, pass two arguments, group index gIndex and item index iIndex |
data |
Array |
[] | Picker initial data |
data[i].currentIndex |
Number |
0 | Current index of this group's list |
data[i].weight |
Number |
1 | Group weights in parent width 1..12 |
data[i].list |
Array |
- | List of the group |
data[i].list[j] |
String or Object |
- | Item in the list of group, use value key when it is a object item |
data[i].onClick |
Function |
- | Click event on the middle layer of this group, pass two arguments that group index gIndex and selected index iIndex of this group |
data[i].textAlign |
String |
- | start center end justify left right nowrap wrap |
data[i].className |
String |
- | Your custom class name for this group |
data[i].divider |
Boolean |
false | If it is true, then onClick list currentIndex will not be used |
data[i].text |
String |
- | Just use this text when divider is true |
šØ Instance methods
name | type | explain |
---|---|---|
setGroupData |
Function (gIndex,gData)=>void |
Dynamically set a group data with two arguments (gIndex, gData) , group index and group data (see props data[i] ) |
getCurrentIndexList |
Function ()=>[] |
Return a Array of the groups current index list (has divider current index, and it is default to 0 ) |
getGroupsRectList |
Function ()=>void |
Get some info for gesture, you can call this function when the component displayed if the component is hidden when it's initialization |
Development
npmĀ startĀ #Ā developmentĀ npmĀ runĀ build:prodĀ #Ā buildĀ forĀ productionĀ npmĀ runĀ prepareĀ #Ā buildĀ forĀ thirdĀ partyĀ
License
MIT