Skip to content

hsuanxyz/ionic-tags-input

Repository files navigation

ionic-tags-input

Dependency Status NPM version Downloads MIT License

NPM

A ionic tags input component for ionic2 中文文档

demo

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