{"id":13696918,"url":"https://github.com/HsuanXyz/ionic-tags-input","last_synced_at":"2025-05-03T17:32:34.283Z","repository":{"id":57276047,"uuid":"87779298","full_name":"hsuanxyz/ionic-tags-input","owner":"hsuanxyz","description":"A ionic tags input component","archived":false,"fork":false,"pushed_at":"2020-03-11T15:01:13.000Z","size":208,"stargazers_count":70,"open_issues_count":19,"forks_count":24,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-20T19:18:52.676Z","etag":null,"topics":["ionic","ionic-tags","ionic2","tags-input","tagsinput"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/ionic-tags-input","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hsuanxyz.png","metadata":{"files":{"readme":"README-CN.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-10T07:20:01.000Z","updated_at":"2024-12-11T12:57:03.000Z","dependencies_parsed_at":"2022-08-25T01:14:17.255Z","dependency_job_id":null,"html_url":"https://github.com/hsuanxyz/ionic-tags-input","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsuanxyz%2Fionic-tags-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsuanxyz%2Fionic-tags-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsuanxyz%2Fionic-tags-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsuanxyz%2Fionic-tags-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hsuanxyz","download_url":"https://codeload.github.com/hsuanxyz/ionic-tags-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252226886,"owners_count":21714889,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ionic","ionic-tags","ionic2","tags-input","tagsinput"],"created_at":"2024-08-02T18:00:49.865Z","updated_at":"2025-05-03T17:32:34.033Z","avatar_url":"https://github.com/hsuanxyz.png","language":"TypeScript","readme":"# ionic-tags-input\n\n[![Dependency Status](https://david-dm.org/HsuanXyz/ionic-tags-input.svg)](https://david-dm.org/HsuanXyz/ionic-tags-input)\n[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][downloads-url] [![MIT License][license-image]][license-url]\n\n[![NPM](https://nodei.co/npm/ionic-tags-input.png?downloads=true\u0026stars=true)](https://nodei.co/npm/ionic-tags-input/)\n\n一个ionic的标签输入(tags-input)组件\n\n![demo](https://github.com/HsuanXyz/hsuanxyz.github.io/blob/master/assets/ionic-tags-input/tags.png?raw=true)\n\n[DEMO](https://stackblitz.com/edit/ionic-tags-input)\n\n## 安装\n\n`npm install ionic-tags-input --save`\n\n## 使用\n\n 引入模块\n\n ```\n ...\n import {IonTagsInputModule} from \"ionic-tags-input\";\n\n@NgModule({\n  ...\n  imports: [\n    IonTagsInputModule,\n    ...\n  ],\n  ...\n})\nexport class AppModule {}\n\n ```\n\n## 例子\n\n### 基本使用\n\n```\n\u003cion-tags-input [(ngModel)]=\"tags\" (onChange)=\"onChange($event)\"\u003e\u003c/ion-tags-input\u003e\n```\n\n```\nexport class YourPage {\n\n  tags = ['Ionic', 'Angular', 'TypeScript'];\n\n  constructor() {}\n\n  onChange(val){\n    console.log(tags)\n  }\n\n}\n```\n\n设置placeholder\n\n```\n\u003cion-tags-input [(ngModel)]=\"tags\" [placeholder]=\"'add tag'\"\u003e\u003c/ion-tags-input\u003e\n```\n\n设置 input type\n\n***无法提供类型验证，只能设置软键盘类型***\n\n```\n\u003cion-tags-input [(ngModel)]=\"tags\" [type]=\"'email'\"\u003e\u003c/ion-tags-input\u003e\n```\n\n设置标签不重复\n\n```\n\u003cion-tags-input [(ngModel)]=\"tags\" [once]=\"'true'\"\u003e\u003c/ion-tags-input\u003e\n```\n\n### 样式\n\n设置平台样式\n\n```\n\u003cion-tags-input [(ngModel)]=\"tags\" [mode]=\"'md'\"\u003e\u003c/ion-tags-input\u003e\n\u003cion-tags-input [(ngModel)]=\"tags\" [mode]=\"'ios'\"\u003e\u003c/ion-tags-input\u003e\n\u003cion-tags-input [(ngModel)]=\"tags\" [mode]=\"'wp'\"\u003e\u003c/ion-tags-input\u003e\n```\n\n设置颜色\n\n```\n\u003cion-tags-input [(ngModel)]=\"tags\" [mode]=\"'light'\"\u003e\u003c/ion-tags-input\u003e\n\u003cion-tags-input [(ngModel)]=\"tags\" [mode]=\"'secondary'\"\u003e\u003c/ion-tags-input\u003e\n\u003cion-tags-input [(ngModel)]=\"tags\" [mode]=\"'danger'\"\u003e\u003c/ion-tags-input\u003e\n```\n\n全部颜色: `light secondary danger dark warn gray purple`\n\n特殊颜色: `random` 随机颜色\n\n隐藏移除按钮\n\n```\n\u003cion-tags-input [(ngModel)]=\"tags\" [hideRemove]=\"true\"\u003e\u003c/ion-tags-input\u003e\n```\n\n### 分割符\n\n使用分隔符确认输入\n```\n\u003cion-tags-input [(ngModel)]=\"tags\" [separatorStr]=\"','\"\u003e\u003c/ion-tags-input\u003e\n```\n\n### 键盘\n\n使用`Backspace`删除标签\n\n```\n\u003cion-tags-input [(ngModel)]=\"tags\" [canBackspaceRemove]=\"true\"\u003e\u003c/ion-tags-input\u003e\n```\n\n使用`Enter` 添加标签\n\n```\n\u003cion-tags-input [(ngModel)]=\"tags\" [canEnterAdd]=\"true\"\u003e\u003c/ion-tags-input\u003e\n```\n\n### 验证\n\n传入一个方法，该方法接受一个字符串，返回一个布尔值\n\n```\n\u003cion-tags-input [(ngModel)]=\"tags\" [verifyMethod]=\"verifyTag\"\u003e\u003c/ion-tags-input\u003e\n```\n\n```\nexport class YourPage {\n\n  tags = ['Ionic', 'Angular', 'TypeScript'];\n\n  constructor() {}\n\n  verifyTag(str: string): boolean{\n    return str !== 'ABC' \u0026\u0026 str.trim() !== '';\n  }\n\n}\n```\n\n## API\n\n### 输入属性\n\n| Name            | Type          | Description |\n| --------------- | ------------- | ----------- |\n| mode            | String        | 设置平台样式 `md ios wp`     |\n| color           | String        | 设置颜色 `light secondary danger dark warn gray purple random` `#xxxxxx`  |\n| placeholder     | String        | 设置 input placeholder |\n| readonly        | Boolean       | 只读 |\n| type            | String        | 设置 input type    |\n| maxTags         | number        | 设置最大数, `-1` 无限制 |\n| hideRemove      | Boolean       | 隐藏移除按钮  |\n| once            | Boolean       | 设置标签唯一 |\n| canEnterAdd     | Boolean       | 是否能使用Enter键确认输入 |\n| canBackspaceRemove | Boolean    | 能否使用Backspace键删除标签 |\n| verifyMethod    | Function      | 提过给标签输入的验证方法 |\n\n### Output\n| Name            | Description |\n| --------------- | ----------- |\n| ionFocus        | on focus |\n| ionBlur         | on blur |\n\n[npm-url]: https://www.npmjs.com/package/ionic-tags-input\n[npm-image]: https://img.shields.io/npm/v/ionic-tags-input.svg\n\n[downloads-image]: https://img.shields.io/npm/dm/ionic-tags-input.svg\n[downloads-url]: http://badge.fury.io/js/ionic-tags-input\n\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat\n[license-url]: LICENSE\n","funding_links":[],"categories":["UI"],"sub_categories":["Form / Input"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHsuanXyz%2Fionic-tags-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FHsuanXyz%2Fionic-tags-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHsuanXyz%2Fionic-tags-input/lists"}