{"id":13750138,"url":"https://github.com/v1Labs/protovue","last_synced_at":"2025-05-09T15:31:39.247Z","repository":{"id":215164758,"uuid":"132629580","full_name":"v1Labs/protovue","owner":"v1Labs","description":"A prototyping component library","archived":false,"fork":false,"pushed_at":"2018-05-29T18:09:59.000Z","size":603,"stargazers_count":191,"open_issues_count":3,"forks_count":7,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-11-16T02:32:43.044Z","etag":null,"topics":["component-library","prototype-kit","prototyping","prototyping-html-layouts","prototyping-interactions","vuejs","vuejs-components","vuejs-plugin","vuejs2"],"latest_commit_sha":null,"homepage":null,"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/v1Labs.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-08T15:33:52.000Z","updated_at":"2024-05-20T22:19:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"d3540ac8-7eef-4515-a6da-9f58114be578","html_url":"https://github.com/v1Labs/protovue","commit_stats":null,"previous_names":["v1labs/protovue"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/v1Labs%2Fprotovue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/v1Labs%2Fprotovue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/v1Labs%2Fprotovue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/v1Labs%2Fprotovue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/v1Labs","download_url":"https://codeload.github.com/v1Labs/protovue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253275606,"owners_count":21882335,"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-library","prototype-kit","prototyping","prototyping-html-layouts","prototyping-interactions","vuejs","vuejs-components","vuejs-plugin","vuejs2"],"created_at":"2024-08-03T08:00:22.383Z","updated_at":"2025-05-09T15:31:39.219Z","avatar_url":"https://github.com/v1Labs.png","language":"Vue","funding_links":[],"categories":["VueJS","Vue","awesome-vue [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Projects Using Vue.js","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg) ★101652](https://github.com/sindresorhus/awesome)","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Open Source [🔝](#readme)"],"sub_categories":["Related community list","开源","Open Source"],"readme":"# Protovue\n\n\u003e A prototyping component library build for Vue.js\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Protovue\" src=\"https://v1labs.github.io/protovue/assets/icon-green.png?raw=true\" width=\"225\" /\u003e\n\u003c/p\u003e\n\n## Getting Started\n\n- [Hacker Noon Tutorial](https://hackernoon.com/hello-protovue-prototyping-component-framework-for-vue-js-8d33351e59c0)\n- [Protovue Examples](https://github.com/v1Labs/protovue-examples)\n\n## Components\n\n### Grid\n\n```javascript\n\u003cv1-grid /\u003e\n\u003cv1-grid size=\"8x8\" /\u003e // Default: 12x10\n\u003cv1-grid gap=\"0\" /\u003e // Default: 10\n\u003cv1-grid guides /\u003e // Shows guides to help build cells\n\u003cv1-grid flat /\u003e // Makes all cells flat (no background)\n```\n\n### Cell\n\n```javascript\n\u003cv1-cell /\u003e\n\u003cv1-cell size=\"2x4\" /\u003e // WxH: size=\"2,4\" and size=\"2 4\" also work\n\u003cv1-cell x=\"1\" /\u003e // Default: 0\n\u003cv1-cell y=\"3\" /\u003e // Default: 0\n\u003cv1-cell flat /\u003e // Removes background color\n\u003cv1-cell middle /\u003e // Vertically aligns content in middle\n\u003cv1-cell bottom /\u003e // Vertically aligns content in bottom\n\u003cv1-cell border /\u003e // Adds border to all sides of cell\n\u003cv1-cell borderTop /\u003e // Adds border to top of cell\n\u003cv1-cell borderRight /\u003e // Adds border to right of cell\n\u003cv1-cell borderBottom /\u003e // Adds border to bottom of cell\n\u003cv1-cell borderLeft /\u003e // Adds border to left of cell\n```\n\n### Text\n\n```javascript\n\u003cv1-text /\u003e\n\u003cv1-text rows=\"5\" /\u003e // Default: 3\n\u003cv1-text center /\u003e // Centers rows\n\u003cv1-text justify /\u003e // Makes rows full width\n```\n\u003cimg alt=\"Text\" src=\"https://v1labs.github.io/protovue/assets/text.png?raw=true\" height=\"150px\" /\u003e\n\n### Image\n\n```javascript\n\u003cv1-image /\u003e\n\u003cv1-image width=\"100px\" /\u003e // Default: 100%\n\u003cv1-image height=\"100px\" /\u003e // Default: 200px\n\u003cv1-image round /\u003e // Makes circle if width equals height\n\u003cv1-image center /\u003e // Centers horizontally\n```\n\u003cimg alt=\"Image\" src=\"https://v1labs.github.io/protovue/assets/image.png?raw=true\" height=\"150px\" /\u003e\n\n### Avatar\n\n```javascript\n\u003cv1-avatar /\u003e\n\u003cv1-footer count=\"5\" /\u003e // Default: 1\n```\n\u003cimg alt=\"Avatar\" src=\"https://v1labs.github.io/protovue/assets/avatar.png?raw=true\" height=\"150px\" /\u003e\n\n### Nav\n\n\u003e Works best in a vertically narrow cell\n\n```javascript\n\u003cv1-nav /\u003e\n\u003cv1-nav links=\"5\" /\u003e // Default: 4\n```\n\u003cimg alt=\"Nav\" src=\"https://v1labs.github.io/protovue/assets/nav.png?raw=true\" /\u003e\n\n### Footer\n\n\u003e Works best in a vertically narrow cell\n\n```javascript\n\u003cv1-footer /\u003e\n\u003cv1-footer links=\"5\" /\u003e // Default: 4\n```\n\u003cimg alt=\"Footer\" src=\"https://v1labs.github.io/protovue/assets/footer.png?raw=true\" /\u003e\n\n### Chart\n\n\u003e Shows a filled line chart.\n\n```javascript\n\u003cv1-chart /\u003e\n\u003cv1-chart height=\"300\" /\u003e // Default: 200\n\u003cv1-chart margin=\"100\" /\u003e // Horizontal margin, Default: 50\n```\n\u003cimg alt=\"Chart\" src=\"https://v1labs.github.io/protovue/assets/chart.png?raw=true\" height=\"200px\" /\u003e\n\n### Intro\n\n\u003e Shows a model explaining the prototype. Helps your users get into the right mind set.\n\n\u003e Works best if you include it before `\u003cv1-grid\u003e`.\n\n```javascript\n\u003cv1-intro title=\"Testing Feature {X}\" version=\"v1\"\u003e\n  \u003cp\u003eImagine your job title is {A} while working for company {B}. This prototype explores a solution for problem {C}.\u003c/p\u003e\n  \u003cp\u003ePlease take it for a test run. Then we'd like to know if you\\'re excited about this direction and if you've got any feedback or ideas.\u003c/p\u003e\n  \u003cp\u003eThanks for your input!\u003c/p\u003e\n\u003c/v1-intro\u003e\n\u003cv1-grid /\u003e\n```\n\u003cimg alt=\"Intro\" src=\"https://v1labs.github.io/protovue/assets/intro.png?raw=true\" height=\"200px\" /\u003e\n\n## License\n[MIT](https://github.com/v1Labs/protovue/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fv1Labs%2Fprotovue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fv1Labs%2Fprotovue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fv1Labs%2Fprotovue/lists"}