{"id":18817824,"url":"https://github.com/vitorluizc/vue-flipper","last_synced_at":"2025-07-04T12:02:22.073Z","repository":{"id":43754106,"uuid":"160602279","full_name":"VitorLuizC/vue-flipper","owner":"VitorLuizC","description":"A component to flip elements with a nice transition.","archived":false,"fork":false,"pushed_at":"2019-03-20T23:32:32.000Z","size":70,"stargazers_count":33,"open_issues_count":0,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-12T17:05:31.637Z","etag":null,"topics":["animation","bem-methodology","bili","flip","flip-animation","flipper","stylus","transition","vue","vue-component","vue-flip","vue-flipper"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/m7lowxvwm9","language":"Vue","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/VitorLuizC.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":"2018-12-06T01:41:57.000Z","updated_at":"2024-12-03T12:08:48.000Z","dependencies_parsed_at":"2022-08-19T07:51:51.191Z","dependency_job_id":null,"html_url":"https://github.com/VitorLuizC/vue-flipper","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VitorLuizC%2Fvue-flipper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VitorLuizC%2Fvue-flipper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VitorLuizC%2Fvue-flipper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VitorLuizC%2Fvue-flipper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VitorLuizC","download_url":"https://codeload.github.com/VitorLuizC/vue-flipper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248795232,"owners_count":21162735,"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":["animation","bem-methodology","bili","flip","flip-animation","flipper","stylus","transition","vue","vue-component","vue-flip","vue-flipper"],"created_at":"2024-11-08T00:13:34.369Z","updated_at":"2025-04-13T23:24:17.622Z","avatar_url":"https://github.com/VitorLuizC.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-flipper\n\n![License](https://badgen.net/github/license/VitorLuizC/vue-flipper)\n![Library size](https://badgen.net/bundlephobia/minzip/vue-flipper)\n![Dependencies](https://badgen.net/david/dep/VitorLuizC/vue-flipper)\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FVitorLuizC%2Fvue-flipper.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2FVitorLuizC%2Fvue-flipper?ref=badge_shield)\n\nA component to flip elements with a nice transition.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg\n    src=\"https://media.giphy.com/media/XKSCnlDkjbaXEkSODW/giphy.gif\"\n    alt=\"vue-flipper GIF\"\n    title=\"A GIF shows VueFlipper example.\"\n  /\u003e\n\u003c/p\u003e\n\n- :zap: It is really small, JavaScript + CSS (min + gzip) is smaller than 1KB\n\n- :art: CSS uses Stylus + BEM + Autoprefixer\n\n- :package: There are ESM, CommonJS and UMD distributions\n\nYou can se by youself on [Codepen](https://codepen.io/VitorLuizC/pen/GPJEEN) or [CodeSandbox](https://codesandbox.io/s/m7lowxvwm9).\n\n## Installation\n\nThis library is published in the NPM registry and can be installed using any compatible package manager.\n\n```sh\nnpm install vue-flipper --save\n\n# For Yarn, use the command below.\nyarn add vue-flipper\n```\n\n## Usage\n\nJust import `Flipper` component from `'vue-flipper'` and use it like any other Vue component.\n\n```vue\n\u003ctemplate\u003e\n  \u003cflipper\n    width=\"270px\"\n    height=\"300px\"\n    :flipped=\"flipped\"\n    @click=\"onClick\"\n  \u003e\n    \u003cdiv slot=\"front\"\u003eFrontface\u003c/div\u003e\n\n    \u003cdiv slot=\"back\"\u003eBackface\u003c/div\u003e\n  \u003c/flipper\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport Flipper from 'vue-flipper';\n\nexport default {\n  components: { Flipper },\n  data () {\n    return {\n      flipped: false\n    };\n  },\n  methods: {\n    onClick () {\n      this.flipped = !this.flipped;\n    }\n  }\n};\n\u003c/script\u003e\n\n\u003cstyle src=\"vue-flipper/dist/vue-flipper.css\" /\u003e\n```\n\n### Usage as global component\n\nIf you need `\u003cflipper /\u003e` available everywhere, you can register it as a global component.\n\n\u003e And don't forget to import its CSS.\n\n```js\nimport 'vue-flipper/dist/vue-flipper.css';\nimport Vue from 'vue';\nimport Flipper from 'vue-flipper';\n\nVue.component('flipper', Flipper);\n```\n\n### Usage from CDN\n\n`vue-flipper` has an UMD bundle and CSS available through JSDelivr and Unpkg CDNs.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/vue-flipper/dist/vue-flipper.css\" /\u003e\n\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue-flipper\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n  /**\n   * vue-flipper is available through VueFlipper.\n   */\n  console.dir(VueFlipper);\n\n  /**\n   * Vue.use will add flipper as global component.\n   */\n  Vue.component('flipper', VueFlipper);\n\u003c/script\u003e\n```\n\n## Props\n\n| Name | Description | Type | Default\n|:---- |:----------- |:---- |:-------\n| flipped | If `true` flips to backface, otherwise to frontface. | `Boolean` | `false`\n| width | Component's width. | `CSSLength (String)` | `'100%'`\n| height | Component's height. | `CSSLength (String)` | `'100%'`\n| duration | Component's transition duration. | `CSSTime (String)` | `'0.5s'`\n| transition | Component's transition timing function. | `CSSTransitionFunction (String)` | `'ease-in'`\n\n## Events\n\n`Flipper` component pass up every `HTMLElement` event. So, you can use `@click`, `@mouseover` etc.\n\n## License\n\nReleased under [MIT License](./LICENSE).\n\n\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FVitorLuizC%2Fvue-flipper.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2FVitorLuizC%2Fvue-flipper?ref=badge_large)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvitorluizc%2Fvue-flipper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvitorluizc%2Fvue-flipper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvitorluizc%2Fvue-flipper/lists"}