# vue-sevenseg ## A Seven Segment Display Component for Vue.js based on sevenSeg.js ### Compile to web component ``` yarn build ``` ### Compile to Vue library so that it can be used in Vue components and apps ``` yarn build-lib ``` ### Compile example vue app that uses the component ``` yarn serve ``` ## Project setup (I haven't tried this, but it should work) ``` npm install --save vue-sevenseg ``` ### JSFiddle example as web component chrome, safari:\ \ \ firefox: \ ### Usage Look in the files ex1.html, ex_unpkg.html for examples... Look at ex_ff.html for firefox for examples. Example: ``` ``` `value` or `:value` - Any Number between 0-9 in String format. Default is "8" - Use `:value={myValue}` to bind `value` prop to `myValue` `color-on` - String. Default is `Red`. - Color when a segment is on `:color-off` - String. Default is `rgb(50, 0, 0)` - Color when a segment is off `color-back` - String. Default is `Black` - Color for the box/background of the display `height` - Number. Default is `100` - Height in pixels of a box the includes the display. `width` - Number. Default is `400` - Width in pixels of a box the includes the display. `digits` - Number. Default is `4` - Number of digits in the display `slant` - Number. Default is 0 - Degrees slant of the digits in the display ### Caveat This is my first vue project. Any suggestions to improve the code is welcome. ### Based on code and instructions from - - - -