A prototyping component library

Overview

Protovue

A prototyping component library build for Vue.js

Protovue

Getting Started

Components

Grid

<v1-grid />
<v1-grid size="8x8" /> // Default: 12x10
<v1-grid gap="0" /> // Default: 10
<v1-grid guides /> // Shows guides to help build cells
<v1-grid flat /> // Makes all cells flat (no background)

Cell

<v1-cell />
<v1-cell size="2x4" /> // WxH: size="2,4" and size="2 4" also work
<v1-cell x="1" /> // Default: 0
<v1-cell y="3" /> // Default: 0
<v1-cell flat /> // Removes background color
<v1-cell middle /> // Vertically aligns content in middle
<v1-cell bottom /> // Vertically aligns content in bottom
<v1-cell border /> // Adds border to all sides of cell
<v1-cell borderTop /> // Adds border to top of cell
<v1-cell borderRight /> // Adds border to right of cell
<v1-cell borderBottom /> // Adds border to bottom of cell
<v1-cell borderLeft /> // Adds border to left of cell

Text

<v1-text />
<v1-text rows="5" /> // Default: 3
<v1-text center /> // Centers rows
<v1-text justify /> // Makes rows full width

Text

Image

<v1-image />
<v1-image width="100px" /> // Default: 100%
<v1-image height="100px" /> // Default: 200px
<v1-image round /> // Makes circle if width equals height
<v1-image center /> // Centers horizontally

Image

Avatar

<v1-avatar />
<v1-footer count="5" /> // Default: 1

Avatar

Nav

Works best in a vertically narrow cell

<v1-nav />
<v1-nav links="5" /> // Default: 4

Nav

Footer

Works best in a vertically narrow cell

<v1-footer />
<v1-footer links="5" /> // Default: 4

Footer

Chart

Shows a filled line chart.

<v1-chart />
<v1-chart height="300" /> // Default: 200
<v1-chart margin="100" /> // Horizontal margin, Default: 50

Chart

Intro

Shows a model explaining the prototype. Helps your users get into the right mind set.

Works best if you include it before <v1-grid>.

<v1-intro title="Testing Feature {X}" version="v1">
  <p>Imagine your job title is {A} while working for company {B}. This prototype explores a solution for problem {C}.</p>
  <p>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.</p>
  <p>Thanks for your input!</p>
</v1-intro>
<v1-grid />

Intro

License

MIT

You might also like...
πŸ”¬ a Vue.js testing utility library

avoriaz a Vue.js testing utility library Deprecation This library will be deprecated once vue-test-utils is released. Installation npm install --save-

Google API Client Library wrapper for Vue.js

VueGapi Google API Client Library wrapper for Vue.js Requirements Version 2 requires Vue.js v3.x. If you are looking for a Vue.js v2.x compatible vers

A vue.js port of the popular dat.GUI library
A vue.js port of the popular dat.GUI library

vue-dat-gui A Vue.js port of the popular dat.GUI library. This is a lightwieght graphical user interface to change variables in Javascript. Useful for

Components library (Vue js version 3)

vue_3_example Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build L

Vue mindee - a very opinionated JavaScript library that will help you build interactive canvas for computer vision detection use cases
Vue mindee - a very opinionated JavaScript library that will help you build interactive canvas for computer vision detection use cases

Check Vue mindee documentation for docs, guides, API and more! Introduction Vue mindee is a very opinionated JavaScript library that will help you bui

A spring-physics based animation library, and more

Vue 3 Spring A spring-physics based animation library, in addition to more components, to cover most of the UI related animations, when CSS is not eno

Vue 3 library for building Dapps on Ethereum.
Vue 3 library for building Dapps on Ethereum.

Vue Dapp Documentation (v0.4.9-beta.0) Features Written in TypeScript for safe and efficient development. Demo written and bundled using Vite Ethers.j

Javascript Frontend (Vue + Electron) for Exiv2 - C++ Image Metadata Library

GNSS EXIFR Add (or) Replace GeoTag Information from CSV to JPEG (or) JPG Drone Imageries (embedded into EXIF). Remove GeoTag Information from Drone Im

A library of doujin articles of Umamusume: Pretty Derby

A library of doujin articles of Umamusume: Pretty Derby

Comments
  • Overflow scroll

    Overflow scroll

    Nice work! The only thing bugging me is that every cell has set overflow: scroll

    This leads to a pretty ugly experience. You should consider getting rid of this property.

    opened by visualjerk 1
  • Guides break if cells are too big

    Guides break if cells are too big

    If a cell has rows/cols greater than that are greater than the size of the grid, it messes with guide lines. I think we should not allow cells to go out of bounds.

    opened by DaneLyons 0
Owner
v1Labs
Functional prototyping for fast moving product teams.
v1Labs
Component Library for Flock using Vue.js

Flock Components for VueJS Installation and Usage: Just use npm install --save @flockos/vue-components Now you can include the scripts by using follow

flock 20 Jan 19, 2022
🎈 Official CNAM component library.

CNAM – VueDot Official CNAM component library. As Easy as 1, 2, 3 Install $ yarn add @cnamts/vue-dot // OR $ npm install @cnamts/vue-dot --save Load /

Le Digital de l'Assurance Maladie 12 Jul 16, 2021
Vue.js hCaptcha Component Library

Vue.js hCaptcha Component Library hCaptcha Component Library for Vue.js. Compatible with Vue 2 and 3. Installation You can install this library via np

hCaptcha 124 Dec 30, 2022
A lightweight pattern library designed to be included with any web project.

Astrum Astrum is nolonger actively maintained. We're fans of Storybook which you should check out as an alternative. Astrum is a lightweight pattern l

No Divide Studio Ltd 1.5k Dec 4, 2022
Rust app to tag your music library.

OneTagger Cross-platform music tagger written in Rust, Vue.js and Quasar. It can fetch metadata from Beatport, Traxsource, Juno Download and Discogs.

null 231 Jan 7, 2023
A Vue 3.0 library for FastComments, a fast and developer friendly comment system.

fastcomments-vue-next A Vue 3.0 library for FastComments, a fast and developer friendly comment system. Installation NPM npm install --save fastcommen

FastComments 4 Oct 4, 2022
Wanderer.js is an easy to use, user-onboarding library.

Wanderer.js is an easy to use, user-onboarding library. It is still in its early stages so more work needs to be done, but at this stage it is still quite functional.

Yaakov 23 Dec 29, 2021
πŸ„ A rich interaction, lightweight, high performance UI library based on Weex.

Weex Ui δΈ­ζ–‡ | English A rich interactive, lightweight, high performance UI library based on Weex. Docs Home Page δΈ­ζ–‡ζ–‡ζ‘£ Use Weex Ui with weex-toolkit Dem

The Apache Software Foundation 4.8k Jan 7, 2023
Engage Vue Client Components Library

Engage Vue Components Library This library provide prebuilt components in Vue.js for building Engage products Installation npm install engage-vue-comp

Engage People 7 Aug 1, 2022
Library of shared components to be re-used in Vue.js

Library of shared components to be re-used in Vue.js Storybook There's a CI/CD integration running using vercel.com @ https://ripe-components-vue-now.

Platforme 8 Dec 14, 2022