{"id":17129100,"url":"https://github.com/cesardeazevedo/ng-input","last_synced_at":"2025-04-13T05:34:43.134Z","repository":{"id":34507399,"uuid":"38448570","full_name":"cesardeazevedo/ng-input","owner":"cesardeazevedo","description":"ng-input - Text Input Effects Angular Directives","archived":false,"fork":false,"pushed_at":"2017-04-17T09:12:51.000Z","size":1025,"stargazers_count":59,"open_issues_count":8,"forks_count":13,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-04-25T10:00:56.745Z","etag":null,"topics":["angular","codrops","input","input-effects","ng-input"],"latest_commit_sha":null,"homepage":"http://cesardeazevedo.github.io/ng-input/","language":"CSS","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/cesardeazevedo.png","metadata":{"files":{"readme":"README.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":"2015-07-02T18:03:41.000Z","updated_at":"2023-03-11T12:19:41.000Z","dependencies_parsed_at":"2022-08-26T04:50:52.449Z","dependency_job_id":null,"html_url":"https://github.com/cesardeazevedo/ng-input","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cesardeazevedo%2Fng-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cesardeazevedo%2Fng-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cesardeazevedo%2Fng-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cesardeazevedo%2Fng-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cesardeazevedo","download_url":"https://codeload.github.com/cesardeazevedo/ng-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248670518,"owners_count":21142896,"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":["angular","codrops","input","input-effects","ng-input"],"created_at":"2024-10-14T19:08:52.738Z","updated_at":"2025-04-13T05:34:42.359Z","avatar_url":"https://github.com/cesardeazevedo.png","language":"CSS","readme":"\n\u003ch1 align=\"center\"\u003e\u003ca href=\"http://cesardeazevedo.github.io/ng-input/\"\u003eng-input\u003c/a\u003e\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\n\n\u003cimg src=\"http://i.cubeupload.com/rUrKrL.png\" /\u003e\n\u003ch4 align=\"center\"\u003eText Input Effects Directives\u003c/h4\u003e\n\u003cp align=\"center\"\u003e\n\u003ca href=\"http://badge.fury.io/js/ng-input\"\u003e\n\u003cimg src=\"https://badge.fury.io/js/ng-input.svg\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://travis-ci.org/cesardeazevedo/ng-input\"\u003e\n\u003cimg src=\"https://travis-ci.org/cesardeazevedo/ng-input.svg\"\u003e\n\u003c/a\u003e\n\n\u003c/p\u003e\n\n\u003c/p\u003e\n\nng-input is a fork from [codrops - Text Input Effects](https://github.com/codrops/TextInputEffects), to work with angular directives.\n\n# Demo\n\n\n[Demo](http://cesardeazevedo.github.io/ng-input/)\n\n# Install\n\n#### Install using `bower`\n\n    bower install ng-input\n  \n#### Install using `npm`\n\n    npm install ng-input\n\n# Usage\n\nInclude the `ngInput` as a dependency for your app.\n\n```js\nangular.module('myApp', ['ngInput']);\n```\n\nadd the directive to your html.\n\n  ```html\n  \u003cng-input theme='hoshi'\u003e\u003c/ng-input\u003e\n  ```\n\n# Base Styles\nTo make it work as the demo page, there is some css properties that you should include.\n\n```css\n    *, *:after, *:before {\n        box-sizing: border-box;\n    }\n    \n    input{\n        font-size: 100%\n    }\n```\nand for bigger\n```css\n    .input{\n        font-size: 150%\n    }\n```\n\n\n# Options\n\n- theme\n- type\n- label\n- color\n- icon\n\ndefault attributes from default angular [input directive](https://docs.angularjs.org/api/ng/directive/input)\n\n- name\n- ng-model\n- ng-required\n- ng-minlength\n- ng-maxlength\n- ng-pattern\n- ng-change\n- ng-trim\n\n# Icons\n\nThe examples are using [material design icons](https://materialdesignicons.com/), you should declare `icon icon--theme mdi mdi-account` to make it work.\n\n```html\n\n\u003cng-input theme='fumi' icon='icon icon--fumi mdi mdi-account'\u003e\u003c/ng-input\u003e\n\n```\n\n# Themes\n\n### Our Themes\n\n \u003e TODO\n\n### [Codrops Themes](http://tympanus.net/Development/TextInputEffects/)\n\n- Haruki\n- Hoshi\n- Kuro\n- Jiro\n- Minoru\n- Yoko\n- Hideo\n- Kyo\n- Akira\n- Ichiro\n- Juro\n- Madoka\n- Kaede\n- Isao\n- Manami\n- Nariko\n- Nao\n- Yoshiko\n- Shoko\n- Chisato\n- Makiko\n- Sae\n- Kozakura\n- Fumi\n- Ruri\n- Kohana\n\n\n# Contributing\n\nFeel free to add your own style.\n\n1. Fork it!\n2. Create your feature branch: git checkout -b my-new-feature\n3. Commit your changes: git commit -m 'Add some feature'\n4. Push to the branch: git push origin my-new-feature\n5. Submit a pull request\n\n# Credits\n\nCredit goes to [codrops](http://tympanus.net/codrops/) for an **AWESOME** work with [Text Input Effects](https://github.com/codrops/TextInputEffects)\n\n[check their article](http://tympanus.net/codrops/2015/01/08/inspiration-text-input-effects/)\n\n\n# License\n\n[LICENSE](./LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcesardeazevedo%2Fng-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcesardeazevedo%2Fng-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcesardeazevedo%2Fng-input/lists"}