ionic-tags-input
A ionic tags input component for ionic2
中文文档
DEMO
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 |
