{"id":13387938,"url":"https://github.com/bartkozal/vue-float-label","last_synced_at":"2025-03-13T13:32:06.559Z","repository":{"id":65412441,"uuid":"82948342","full_name":"bartkozal/vue-float-label","owner":"bartkozal","description":"Float label pattern","archived":true,"fork":false,"pushed_at":"2018-12-24T23:31:01.000Z","size":433,"stargazers_count":176,"open_issues_count":10,"forks_count":30,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-29T10:45:18.618Z","etag":null,"topics":["float","label","vue","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"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/bartkozal.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":"2017-02-23T16:41:05.000Z","updated_at":"2024-09-16T09:20:32.000Z","dependencies_parsed_at":"2023-01-22T08:05:38.989Z","dependency_job_id":null,"html_url":"https://github.com/bartkozal/vue-float-label","commit_stats":null,"previous_names":["bkzl/vue-float-label"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartkozal%2Fvue-float-label","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartkozal%2Fvue-float-label/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartkozal%2Fvue-float-label/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartkozal%2Fvue-float-label/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bartkozal","download_url":"https://codeload.github.com/bartkozal/vue-float-label/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243414480,"owners_count":20287128,"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":["float","label","vue","vuejs"],"created_at":"2024-07-30T13:00:20.734Z","updated_at":"2025-03-13T13:32:06.258Z","avatar_url":"https://github.com/bartkozal.png","language":"JavaScript","funding_links":[],"categories":["UI组件"],"sub_categories":[],"readme":"# vue-float-label\n\nFloat label pattern for Vue.js. Cross-browser compatible and easy to customize\nwith CSS.\n\n![intro](https://github.com/bkzl/vue-float-label/raw/master/demo/intro.gif)\n\n```html\n\u003cfloat-label\u003e\n  \u003cinput type=\"text\" placeholder=\"Label\"\u003e\n\u003c/float-label\u003e\n```\n\n## Installation\n\n### yarn / npm\n\nInstall package using `yarn` or `npm`:\n\n```sh\n$ yarn add vue-float-label\n\n# or\n\n$ npm install --save vue-float-label\n```\n\n#### Global\n\nLoad the plugin by calling `Vue.use()`:\n\n```js\nimport Vue from \"vue\";\nimport VueFloatLabel from \"vue-float-label\";\n\nVue.use(VueFloatLabel);\n```\n\nNow you have access in your templates to the `\u003cfloat-label\u003e` component.\n\n#### Local\n\nYou may prefer to explicitly import the plugin and use it inside your components:\n\n```vue\n\u003ctemplate\u003e\n  \u003cfloat-label\u003e\n    ...\n  \u003c/float-label\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport FloatLabel from \"vue-float-label/components/FloatLabel\";\n\nexport default {\n  components: {\n    FloatLabel\n  }\n};\n\u003c/script\u003e\n```\n\n### CDN\n\nLoad the script file from CDN:\n\n```html\n\u003cdiv id=\"root\"\u003e\u003c/div\u003e\n\u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"//unpkg.com/vue-float-label\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  new Vue({\n    el: '#root',\n    template: '\u003cfloat-label\u003e...\u003c/float-label\u003e'\n  })\n\u003c/script\u003e\n```\n\n## Usage\n\nWrap input, textarea or select with `\u003cfloat-label\u003e`:\n\n```html\n\u003cfloat-label\u003e\n  \u003cinput type=\"email\" placeholder=\"E-mail\"\u003e\n\u003c/float-label\u003e\n\n\u003cfloat-label\u003e\n  \u003ctextarea placeholder=\"Comment\"\u003e\u003c/textarea\u003e\n\u003c/float-label\u003e\n\n\u003cfloat-label :dispatch=\"false\"\u003e\n  \u003cselect\u003e\n    \u003coption disabled selected\u003eFramework\u003c/option\u003e\n    \u003coption\u003eVue\u003c/option\u003e\n    \u003coption\u003eReact\u003c/option\u003e\n    \u003coption\u003eAngular\u003c/option\u003e\n    \u003coption\u003eEmber\u003c/option\u003e\n  \u003c/select\u003e\n\u003c/float-label\u003e\n```\n\nSee more examples at [Demo.vue](https://github.com/bkzl/vue-float-label/blob/master/demo/Demo.vue).\n\n## Customization\n\n### Design\n\nStyle `.vfl-label`, `.vfl-label-on-input` and `.vfl-label-on-focus`\nto meet your design requirements:\n\n![example](https://github.com/bkzl/vue-float-label/raw/master/demo/example.gif)\n\n```css\n.vfl-label {\n  text-transform: uppercase;\n}\n\n.vfl-label-on-input {\n  top: -1em;\n}\n\n.vfl-label-on-focus {\n  color: #ff851b;\n}\n\n.vfl-label + input {\n  padding-left: 0;\n  font-size: 100%;\n  border: 0;\n  border-bottom: 2px solid #aaa;\n  transition: border 0.2s;\n}\n\n.vfl-label-on-focus + input {\n  border-bottom: 2px solid #ff851b;\n}\n```\n\n### Props\n\nSet `:on` prop to add an additional condition for label activation:\n\n```vue\n\u003ctemplate\u003e\n  \u003cfloat-label :on=\"isActive\"\u003e\n    \u003cinput type=\"text\" placeholder=\"Inactive\"\u003e\n  \u003c/float-label\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  computed: {\n    isActive() {\n      return false;\n    }\n  },\n  components: {\n    FloatLabel\n  }\n};\n\u003c/script\u003e\n```\n\nSet `:label` prop to override `placeholder` attribute for input/textarea or\n`option[disabled][selected]` for select:\n\n```html\n\u003cfloat-label label=\"Last name\"\u003e\n  \u003cinput type=\"text\" placeholder=\"Surname\"\u003e\n\u003c/float-label\u003e\n```\n\n```vue\n\u003ctemplate\u003e\n  \u003cfloat-label label=\"Version\"\u003e\n    \u003cselect v-model=\"version\"\u003e\n      \u003coption v-for=\"option in options\" :value=\"option.value\"\u003e\n        {{ option.text }}\n      \u003c/option\u003e\n    \u003c/select\u003e\n  \u003c/float-label\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data() {\n    return {\n      version: \"beta\",\n      options: [\n        { value: \"alpha\", text: \"Alpha\" },\n        { value: \"beta\", text: \"Beta\" },\n        { value: \"stable\", text: \"Stable\" }\n      ]\n    };\n  },\n  components: {\n    FloatLabel\n  }\n};\n\u003c/script\u003e\n```\n\nSet `:fixed` to `true` to make label permanently active:\n\n```vue\n\u003ctemplate\u003e\n  \u003cfloat-label fixed\u003e\n    \u003cinput type=\"text\" placeholder=\"Fixed\"\u003e\n  \u003c/float-label\u003e\n\u003c/template\u003e\n```\n\nSet `:dispatch` to `false` to disable triggering `input` event\nonce the component is mounted:\n\n_By default it's set to true to activate label when form element has value._\n\n```vue\n\u003ctemplate\u003e\n  \u003cfloat-label :dispatch=\"false\"\u003e\n    \u003cinput type=\"email\" placeholder=\"Email\" v-model=\"email\"\u003e\n  \u003c/float-label\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data() {\n    return {\n      email: \"john@example.com\"\n    };\n  },\n  components: {\n    FloatLabel\n  }\n};\n\u003c/script\u003e\n```\n\n## Development\n\n1.  Clone the repository:\n\n    ```sh\n    $ git clone git@github.com:bkzl/vue-float-label.git\n    ```\n\n2.  Install dependencies:\n\n    ```sh\n    $ yarn install\n    ```\n\n3.  Start development:\n\n    ```sh\n    $ yarn start\n    ```\n\n---\n\nCode is open sourced [on GitHub](https://github.com/bkzl/vue-float-label). Up to date changelog is available under [the releases section](https://github.com/bkzl/vue-float-label/releases).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbartkozal%2Fvue-float-label","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbartkozal%2Fvue-float-label","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbartkozal%2Fvue-float-label/lists"}