Directory

← Back

vue-sevenseg

A Vue component that creates a vector-based (SVG) seven-segment display.

Author

Rating

Popularity

<100

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:
https://jsfiddle.net/k24o6zfq/1/
https://jsfiddle.net/9qxe240L/
firefox: https://jsfiddle.net/7pcgsqyz/\

Usage

Look in the files ex1.html, ex_unpkg.html for examples... Look at ex_ff.html for firefox for examples.

Example:

<v-sevenseg value=".34" color-back="transparent" color-on="green" color-off="rgb(255, 240, 255)" height=80 digits=7 slant=10></v-sevenseg>

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

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • vue#^2.5.21
Released
2019-01-29
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Browser
Browser Independent

vue-sevenseg - Vaadin Add-on Directory

A Vue component that creates a vector-based (SVG) seven-segment display. vue-sevenseg - Vaadin Add-on Directory
# 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 - - - -
Online