nuǝW pǝuoᴉʇᴉsoԀ ʎlǝʌᴉʇɐƃǝN

    ionic-tags-input
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2 • Public • Published

    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

    Install

    npm i ionic-tags-input

    DownloadsWeekly Downloads

    259

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    132 kB

    Total Files

    18

    Last publish

    Collaborators

    • hsuanlee