{"id":13697063,"url":"https://github.com/HsuanXyz/ionic2-pincode-input","last_synced_at":"2025-05-03T17:32:59.738Z","repository":{"id":57276019,"uuid":"85065586","full_name":"hsuanxyz/ionic2-pincode-input","owner":"hsuanxyz","description":"🔒 A pincode input for ionic2","archived":false,"fork":false,"pushed_at":"2019-05-02T10:54:04.000Z","size":193,"stargazers_count":57,"open_issues_count":5,"forks_count":22,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-25T11:42:04.414Z","etag":null,"topics":["ionic2","number-input","pincode"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/ionic2-pincode-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-03-15T11:42:05.000Z","updated_at":"2024-12-11T12:57:19.000Z","dependencies_parsed_at":"2022-08-25T01:14:14.318Z","dependency_job_id":null,"html_url":"https://github.com/hsuanxyz/ionic2-pincode-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%2Fionic2-pincode-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsuanxyz%2Fionic2-pincode-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsuanxyz%2Fionic2-pincode-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsuanxyz%2Fionic2-pincode-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hsuanxyz","download_url":"https://codeload.github.com/hsuanxyz/ionic2-pincode-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252226960,"owners_count":21714911,"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":["ionic2","number-input","pincode"],"created_at":"2024-08-02T18:00:52.249Z","updated_at":"2025-05-03T17:32:59.473Z","avatar_url":"https://github.com/hsuanxyz.png","language":"TypeScript","funding_links":[],"categories":["UI"],"sub_categories":["Keyboards"],"readme":"# ionic2-pincode-input\n\n[![Dependency Status](https://david-dm.org/HsuanXyz/ionic2-pincode-input.svg)](https://david-dm.org/HsuanXyz/ionic2-pincode-input)\n[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][downloads-url] [![MIT License][license-image]][license-url]\n\n一个ionic2的PIN码输入组件\n\n[live demo](https://stackblitz.com/edit/ionic2-pincode-input)\n\n\n![v](https://github.com/HsuanXyz/hsuanxyz.github.io/blob/master/assets/ionic2-pincode-input/pin-code.gif?raw=true)\n## 安装\n\n`npm install ionic2-pincode-input --save`\n\n## 使用\n\napp.module.ts\n```typescript\nimport { NgModule, ErrorHandler } from '@angular/core';\nimport { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';\nimport { MyApp } from './app.component';\n...\n\nimport { PincodeInputModule } from  'ionic2-pincode-input';\n\n@NgModule({\n  declarations: [\n    MyApp,\n    ...\n  ],\n  imports: [\n    PincodeInputModule,\n    IonicModule.forRoot(MyApp),\n  ],\n  bootstrap: [IonicApp],\n  entryComponents: [\n    MyApp,\n    ...\n  ],\n  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]\n})\nexport class AppModule {}\n```\nyour-page.ts\n\n```typescript\nimport { Component } from '@angular/core';\n\nimport { NavController } from 'ionic-angular';\nimport { PincodeController } from  'ionic2-pincode-input/dist/pincode'\n@Component({\n  selector: 'page-home',\n  templateUrl: 'home.html'\n})\nexport class HomePage {\n\n  code:string;\n\n  constructor(\n    public navCtrl: NavController,\n    public pincodeCtrl: PincodeController,\n  ) {\n  }\n\n  openPinCode():any{\n\n    let pinCode =  this.pincodeCtrl.create({\n      title:'Pincode'\n    });\n\n    pinCode.present();\n\n    pinCode.onDidDismiss( (code,status) =\u003e {\n\n      if(status === 'done'){\n        // 输入完成\n        this.code = code;\n      }else if (status === 'forgot'){\n        // 忘记密码\n      }\n\n    })\n\n  }\n\n}\n\n```\n\n\n## create(PincodeOpt)\n\n### PincodeOpt\n| Name            | Type          | Default       | Description |\n| --------------- | ------------- | ------------- | ----------- |\n| cssClass        | string        | `''`          | 空格分开 |\n| passSize        | number        | `6`           | 你的密码长度|\n| title           | String        | `'password'`  | 标题       |\n| cancelButtonText| String        | `'cancel'`    | 取消按钮文字    |\n| encoded         | Function      | ` (c) =\u003e {return c} ` | 用于在返回code前编码的函数 |\n| forgotPasswordText| String      | `'forgot password'`| 忘记密码的文字    |\n| hideToolbar| Boolean     | `false`       | 隐藏工具栏   |\n| hideForgotPassword| Boolean     | `false`       | 隐藏忘记密码按钮   |\n| hideCancelButton | Boolean     | `false`       | 隐藏取消按钮  |\n| enableBackdropDismiss| Boolean     | `true`       | 是否可以点击遮罩关闭组件  |\n\n[npm-url]: https://www.npmjs.com/package/ionic2-pincode-input\n[npm-image]: https://img.shields.io/npm/v/ionic2-pincode-input.svg\n\n[downloads-image]: https://img.shields.io/npm/dm/ionic2-pincode-input.svg\n[downloads-url]: http://badge.fury.io/js/ionic2-pincode-input\n\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat\n[license-url]: LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHsuanXyz%2Fionic2-pincode-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FHsuanXyz%2Fionic2-pincode-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHsuanXyz%2Fionic2-pincode-input/lists"}