| vue-canvas-element

vue-canvas-element is a Vue component to create a multipurpose canvas card. vue-canvas-element has many options and can be used in different situations like:

dashboard statistic information
business card
product card

See demo for details.

Features

default size works on desktop, laptop, mobile (max width 320px), but each canvas can be set with custom width and height (px,%,em,rem accepted)
3 actions slots ($emit(...))
custom options for visual impact (colors, icons, images, etc.)
flip effect available (onclick) with a new configurable canvas
HTML injection available for almost all elements

Demo

For full demo examples code SandBox

Installation

npm install vue-canvas-element

Usage

Import component

import VCanvasElement from 'vue-canvas-element'

In template (for options and configuration see Docs below)

...
  <v-canvas-element
    title="your title"
    label="your label"
    ....
  />
...

Docs

vue-canvas-element has many options that you can control in order to fit with your template/layout/app.

We designed the component in order to make compatible with a clean project so we decided to not include any dependency. For this reason you can add to any Vue project as is, without depending on third libraries, or simply using yours.

For any issue please open an issue on github repository.

GitHub

Props

Prop	Required	Description	Type	Default	Notes
name	YES	name or ID of canvas	String		Used to assign $emit events
width	NO	canvas width	String	320px	standard CSS values (px,%, rem, ecc,)
height	NO	canvas width	String	10.5rem	standard CSS value
title	NO	canvas title	String	Title	HTML injection available
label	NO	canvas label	String	Label	HTML injection available
content	NO	canvas content	String	abstract	HTML injection available
color	NO	background color/image	String	#FFF	CSS or url(image_url) or image_uri
text_color	NO	color for all text elements	String	#555	standard CSS value
icon_box	NO	background color of icon box	String	#fff	standard CSS value
icon_color	NO	color of icon box icon	String	#555	standard CSS value
icon	NO	icon	String		HTML injection available
image	NO	image to set in the icon box	String		url(your image) or image uri
elevation	NO	box shadow setting	String	'0'	1 thru 3 elevations available
divider	NO	set a divider line between content and footer	String	'0'	set the px border height as divider
flip	NO	enable/disable flipping canvas	Boolean	false
flip_text	NO	help text to click for flip	String	'more'
back_color	NO	background color of the flipped canvas	String	#fff	standard CSS value
back_content	NO	content of the flipped canvas	String		any HTML code
slot_1	NO	left button slot of the footer	String		HTML injection available
slot_2	NO	center button slot of the footer	String		HTML injection available
slot_3	NO	right button slot of the footer	String		HTML injection available

Events

vue-canvas-element emits 1 event (this.$emit(...)) in order to get the following user actions:

click on the footer left button/link
click on the footer center button/link
click on the footer right button/link

Since there are 3 clickable area available in the canvas footer that you can customize with your HTML code a click on each of this area emits one event with the following info:

function ( name , slot ) where name is the canvas name and slot the slot clicked You need at least 1 slot option set in order to use the emit event.

Event	Required	Description	Type	Return
@slotClick	NO	click on one of the three clickable area	Function	-name of canvas(String) -slot clicked(Number)

In your template you have to set a function that get the emitted event. Example

<template>
  ...
  <v-canvas-element
    name="box3"
    color="#e91e63"
    label="New orders"
    title="<h1>+110</h1>"
    content=""
    ...
    slot_2="<button class='btn'>Click to get info</button>"
    @slotClick="myFunction"
  />
  ...
</template>
<script>
export default {
  ...
  methods:{
    myFunction(canvas,slot){
      //@canvas: canvas name
      //@slot: slot clicked (1,2 or 3)
      //set your logic here
    }
  }
  ...
}
</script>

Notes

Development or demo Component uses Google Material Design icons. If you don't have any icons library you can add to your index.html

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">

License

Released under MIT license.