ionic-tags-input
A ionic tags input component for ionic2 中文文档
Install
npm install ionic-tags-input --save
Use
import the module:
...
import {IonTagsInputModule} from "ionic-tags-input";
@NgModule({
...
imports: [
IonTagsInputModule,
...
],
...
})
export class AppModule {}Example
Basic
<ion-tags-input [(ngModel)]="tags" (onChange)="onChange($event)"></ion-tags-input>export class YourPage {
tags = ['Ionic', 'Angular', 'TypeScript'];
constructor() {}
onChange(val){
console.log(tags)
}
}set placeholder
<ion-tags-input [(ngModel)]="tags" [placeholder]="'add tag'"></ion-tags-input>set input type
*** Can not be verified, but can set the keyboard type ***
<ion-tags-input [(ngModel)]="tags" [type]="'email'"></ion-tags-input>can not be repeated
<ion-tags-input [(ngModel)]="tags" [once]="'true'"></ion-tags-input>Style
Setting mode
<ion-tags-input [(ngModel)]="tags" [mode]="'md'"></ion-tags-input>
<ion-tags-input [(ngModel)]="tags" [mode]="'ios'"></ion-tags-input>
<ion-tags-input [(ngModel)]="tags" [mode]="'wp'"></ion-tags-input>Setting color:
<ion-tags-input [(ngModel)]="tags" [color]="'light'"></ion-tags-input>
<ion-tags-input [(ngModel)]="tags" [color]="'secondary'"></ion-tags-input>
<ion-tags-input [(ngModel)]="tags" [color]="'danger'"></ion-tags-input>All color: light secondary danger dark warn gray purple
Special color: random
Hide remove button
<ion-tags-input [(ngModel)]="tags" [hideRemove]="true"></ion-tags-input>Separator
Use separator submit input
<ion-tags-input [(ngModel)]="tags" [separatorStr]="','"></ion-tags-input>Keyboard
Use Backspace remove tag
<ion-tags-input [(ngModel)]="tags" [canBackspaceRemove]="true"></ion-tags-input>Use Enter submit input
<ion-tags-input [(ngModel)]="tags" [canEnterAdd]="true"></ion-tags-input>Verify
A function whose argument is a string, returns a boolean value
<ion-tags-input [(ngModel)]="tags" [verifyMethod]="verifyTag"></ion-tags-input>export class YourPage {
tags = ['Ionic', 'Angular', 'TypeScript'];
constructor() {}
verifyTag(str: string): boolean{
return str !== 'ABC' && str.trim() !== '';
}
}API
Input
| Name | Type | Description |
|---|---|---|
| mode | String | platform style md ios wp |
| color | String | color style light secondary danger dark warn gray purple random #xxxxxx |
| readonly | Boolean | readonly |
| placeholder | String | input placeholder |
| type | String | input type |
| maxTags | number | sets tags max number, -1 unlimited |
| hideRemove | Boolean | hide remove button |
| once | Boolean | setting can not be repeated |
| canEnterAdd | Boolean | can usr the Enter key submit input |
| canBackspaceRemove | Boolean | can usr the Backspace key remove tag |
| verifyMethod | Function | use function to verify input |
Output
| Name | Description |
|---|---|
| ionFocus | on focus |
| ionBlur | on blur |