https://github.com/HsuanXyz/ionic-tags-input

A ionic tags input component
https://github.com/HsuanXyz/ionic-tags-input

ionic ionic-tags ionic2 tags-input tagsinput

Last synced: 30 days ago
JSON representation

A ionic tags input component

• Host: GitHub
• URL: https://github.com/HsuanXyz/ionic-tags-input
• Owner: hsuanxyz
• License: mit
• Created: 2017-04-10T07:20:01.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-03-11T15:01:13.000Z (almost 5 years ago)
• Last Synced: 2024-10-28T20:52:34.942Z (about 1 month ago)
• Topics: ionic, ionic-tags, ionic2, tags-input, tagsinput
• Language: TypeScript
• Homepage: https://stackblitz.com/edit/ionic-tags-input
• Size: 203 KB
• Stars: 71
• Watchers: 5
• Forks: 24
• Open Issues: 19
• Metadata Files:
  • Readme: README-CN.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-ionic2-components - Tags Input
• Awesome - Tags Input

README

        
# ionic-tags-input

[![Dependency Status](https://david-dm.org/HsuanXyz/ionic-tags-input.svg)](https://david-dm.org/HsuanXyz/ionic-tags-input)

[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][downloads-url] [![MIT License][license-image]][license-url]

[![NPM](https://nodei.co/npm/ionic-tags-input.png?downloads=true&stars=true)](https://nodei.co/npm/ionic-tags-input/)

一个ionic的标签输入(tags-input)组件

![demo](https://github.com/HsuanXyz/hsuanxyz.github.io/blob/master/assets/ionic-tags-input/tags.png?raw=true)

[DEMO](https://stackblitz.com/edit/ionic-tags-input)

## 安装

`npm install ionic-tags-input --save`

## 使用

 引入模块

 ```

 ...

 import {IonTagsInputModule} from "ionic-tags-input";

@NgModule({

  ...

  imports: [

    IonTagsInputModule,

    ...

  ],

  ...

})

export class AppModule {}

 ```

## 例子

### 基本使用

```

```

```

export class YourPage {

  tags = ['Ionic', 'Angular', 'TypeScript'];

  constructor() {}

  onChange(val){

    console.log(tags)

  }

}

```

设置placeholder

```

```

设置 input type

***无法提供类型验证，只能设置软键盘类型***

```

```

设置标签不重复

```

```

### 样式

设置平台样式

```

```

设置颜色

```

```

全部颜色: `light secondary danger dark warn gray purple`

特殊颜色: `random` 随机颜色

隐藏移除按钮

```

```

### 分割符

使用分隔符确认输入

```

```

### 键盘

使用`Backspace`删除标签

```

```

使用`Enter` 添加标签

```

```

### 验证

传入一个方法，该方法接受一个字符串，返回一个布尔值

```

```

```

export class YourPage {

  tags = ['Ionic', 'Angular', 'TypeScript'];

  constructor() {}

  verifyTag(str: string): boolean{

    return str !== 'ABC' && str.trim() !== '';

  }

}

```

## API

### 输入属性

| Name            | Type          | Description |

| --------------- | ------------- | ----------- |

| mode            | String        | 设置平台样式 `md ios wp`     |

| color           | String        | 设置颜色 `light secondary danger dark warn gray purple random` `#xxxxxx`  |

| placeholder     | String        | 设置 input placeholder |

| readonly        | Boolean       | 只读 |

| type            | String        | 设置 input type    |

| maxTags         | number        | 设置最大数, `-1` 无限制 |

| hideRemove      | Boolean       | 隐藏移除按钮  |

| once            | Boolean       | 设置标签唯一 |

| canEnterAdd     | Boolean       | 是否能使用Enter键确认输入 |

| canBackspaceRemove | Boolean    | 能否使用Backspace键删除标签 |

| verifyMethod    | Function      | 提过给标签输入的验证方法 |

### Output

| Name            | Description |

| --------------- | ----------- |

| ionFocus        | on focus |

| ionBlur         | on blur |

[npm-url]: https://www.npmjs.com/package/ionic-tags-input

[npm-image]: https://img.shields.io/npm/v/ionic-tags-input.svg

[downloads-image]: https://img.shields.io/npm/dm/ionic-tags-input.svg

[downloads-url]: http://badge.fury.io/js/ionic-tags-input

[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat

[license-url]: LICENSE