{"id":14973770,"url":"https://github.com/marcodpt/vue-over-body","last_synced_at":"2025-07-26T22:35:14.043Z","repository":{"id":72021154,"uuid":"145565100","full_name":"marcodpt/vue-over-body","owner":"marcodpt","description":"Create modals, sidebars, notifications, pop ups with css transitions!","archived":false,"fork":false,"pushed_at":"2018-09-19T21:30:11.000Z","size":1427,"stargazers_count":39,"open_issues_count":0,"forks_count":9,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-04T17:18:47.909Z","etag":null,"topics":["component","css-transitions","modal","notifications","sidebar","vue","vuejs2"],"latest_commit_sha":null,"homepage":"https://marcodpt.github.io/vue-over-body/","language":"JavaScript","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/marcodpt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-21T13:05:03.000Z","updated_at":"2023-12-29T18:38:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"ed4660c5-2e25-495b-9029-95655d18fe18","html_url":"https://github.com/marcodpt/vue-over-body","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fvue-over-body","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fvue-over-body/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fvue-over-body/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fvue-over-body/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcodpt","download_url":"https://codeload.github.com/marcodpt/vue-over-body/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219868693,"owners_count":16555666,"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":["component","css-transitions","modal","notifications","sidebar","vue","vuejs2"],"created_at":"2024-09-24T13:49:23.291Z","updated_at":"2024-10-11T09:09:57.972Z","avatar_url":"https://github.com/marcodpt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-over-body\nCreate modals, sidebars, notifications, pop ups with css transitions! \n\n## Demo\n[Live Demo](http://marcodpt.github.io/vue-over-body)\nwith bulma css framework, but we do not impose any css framework\n\n## Install\n```\nnpm install --save vue-over-body\n```\n\n## Usage\n```javascript\n  import Vue from 'vue'\n  import overBody from 'vue-over-body'\n\n  new Vue({\n    components: {\n      'vue-over-body': overBody\n    },\n    data: function () {\n      return {\n        open: 1\n      }\n    }\n  }).$mount('#app')\n```\n\n```html\n  \u003cvue-over-body :dim=\"false\" :open=\"open\" before=\"before\" after=\"after\" :transition=\"0.3\"\u003e\n    \u003cdiv\u003e\n      \u003cbutton @click=\"open = 0\"\u003e\u0026times;\u003c/button\u003e\n      \u003cp\u003eA little alert message!\u003c/p\u003e \n      \u003cp\u003eFor the users of your app!\u003c/p\u003e \n    \u003c/div\u003e\n  \u003c/vue-over-body\u003e\n```\n\n```css\n  .before {\n    top: 50px;\n    right: -300px;\n    width: 300px;\n    background-color:yellow;\n    position:absolute;\n  }\n\n  .after {\n    right: 50px;\n  }\n```\n\n### Props\n - open\n   - type: Number\n   - default: 0\n   - description: 0 means hide, other number means z-index of the component\n - before\n   - type: String\n   - default: \"\"\n   - description: css class aplied to slot parent, always active\n - after\n   - type: String\n   - default: \"\"\n   - description: css class aplied to slot parent, active after the transition\n - transition\n   - type: Number\n   - default: 0.3\n   - description: time of transition in seconds\n - dim\n   - type: Boolean\n   - default: true\n   - description: make the background darker?\n - dialogStyle\n   - type: Object\n   - default: {}\n   - description: style to be applied on dialog container\n\n## Contribute\nWe need help! Our goals are:\n - CSS Transitions\n - Add tests\n - More usage examples and better home page\n - Add support to most browsers\n\nWhat is outside of the scope of this project:\n - Create any kind of layout like buttons, headers, pre build alerts!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcodpt%2Fvue-over-body","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcodpt%2Fvue-over-body","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcodpt%2Fvue-over-body/lists"}