https://github.com/v1Labs/protovue
A prototyping component library
https://github.com/v1Labs/protovue
component-library prototype-kit prototyping prototyping-html-layouts prototyping-interactions vuejs vuejs-components vuejs-plugin vuejs2
Last synced: 7 months ago
JSON representation
A prototyping component library
- Host: GitHub
- URL: https://github.com/v1Labs/protovue
- Owner: v1Labs
- License: mit
- Created: 2018-05-08T15:33:52.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-05-29T18:09:59.000Z (over 7 years ago)
- Last Synced: 2024-11-16T02:32:43.044Z (about 1 year ago)
- Topics: component-library, prototype-kit, prototyping, prototyping-html-layouts, prototyping-interactions, vuejs, vuejs-components, vuejs-plugin, vuejs2
- Language: Vue
- Size: 589 KB
- Stars: 191
- Watchers: 9
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-zh - Protovue
- awesome-vue - Protovue - A prototyping component library (Open Source [🔝](#readme))
- awesome-vue - Protovue ★173 - A prototyping component library that helps designers and developers quicky scaffold an abstracted app layout. (Awesome Vue.js [ ★101652](https://github.com/sindresorhus/awesome) / Open Source)
- awesome-ui-component-library - ProtoVue - A prototyping component library build for Vue.js from grid to UI elements (VueJS / Related community list)
- awesome-vue - Protovue - A prototyping component library that helps designers and developers quicky scaffold an abstracted app layout. (Awesome Vue.js [](https://github.com/sindresorhus/awesome) / Open Source)
- awesome-vue - Protovue - A prototyping component library that helps designers and developers quickly scaffold an abstracted app layout. (Projects Using Vue.js / Open Source)
README
# Protovue
> A prototyping component library build for Vue.js
## Getting Started
- [Hacker Noon Tutorial](https://hackernoon.com/hello-protovue-prototyping-component-framework-for-vue-js-8d33351e59c0)
- [Protovue Examples](https://github.com/v1Labs/protovue-examples)
## Components
### Grid
```javascript
// Default: 12x10
// Default: 10
// Shows guides to help build cells
// Makes all cells flat (no background)
```
### Cell
```javascript
// WxH: size="2,4" and size="2 4" also work
// Default: 0
// Default: 0
// Removes background color
// Vertically aligns content in middle
// Vertically aligns content in bottom
// Adds border to all sides of cell
// Adds border to top of cell
// Adds border to right of cell
// Adds border to bottom of cell
// Adds border to left of cell
```
### Text
```javascript
// Default: 3
// Centers rows
// Makes rows full width
```
### Image
```javascript
// Default: 100%
// Default: 200px
// Makes circle if width equals height
// Centers horizontally
```
### Avatar
```javascript
// Default: 1
```
### Nav
> Works best in a vertically narrow cell
```javascript
// Default: 4
```
### Footer
> Works best in a vertically narrow cell
```javascript
// Default: 4
```
### Chart
> Shows a filled line chart.
```javascript
// Default: 200
// Horizontal margin, Default: 50
```
### Intro
> Shows a model explaining the prototype. Helps your users get into the right mind set.
> Works best if you include it before ``.
```javascript
Imagine your job title is {A} while working for company {B}. This prototype explores a solution for problem {C}.
Please 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.
Thanks for your input!
```
## License
[MIT](https://github.com/v1Labs/protovue/blob/master/LICENSE)