vuejs-image-placeholder

Svg image placeholder
928 11
vue svg placeholder
Install
npm install vuejs-image-placeholder
Latest Version:0.3.0
Vue:2
License:MIT
Last Updated:Nov 14, 2017
Links: GitHub  ·  npm
Maintainer: charliekassel

Vuejs Image Placeholder

svg image placeholder

Creates a customisable svg image placeholder

Install

npm install vuejs-image-placeholder

Usage

All props are optional

Basic

<image-placeholder
    :width="200"
    :height="200"
    :background-colour="#ddd"
    :border-colour="#000"
    :border-width="2"
    :show-ratio="true"
    :font-family="Tahoma, sans-serif"
    :font-colour="#333"
    :font-size="18"
></image-placeholder>

By default the image shows the dimensions, using showRatio prop the ratio can displayed instead. Alternatively you can provide your own text.

<image-placeholder>My Custom Text</image-placeholder>

Available props

Prop Type Default Description
width Number 200 Img width
height Number 150 Img height
backgroundColour String #ccc Background colour
borderColour String #333 Border colour
borderWidth Number 1 Border width
showRatio Boolean false Show image size in pixels or the proportion ratio
fontFamily String monospace Font for the display text
fontColour String #333 Display text colour
fontSize Number 14 Display text size

Related Packages

vue-svg-pan-zoom

Vue component for svg-pan-zoom

59,567
svg vuejs
@jt-icons/icon-vue-components

Vue components of JT Icons collection.

2,961 1
svg icon
@svgv/core

Node.js API to transform SVGs into Vue components.

1,525 4
svg vue
@k-l-lambda/web-widgets

A package contains some utility vue.js components and modules.

831 0
svg midi
svg-to-vue

Utility to convert SVG code into Vue component definition

2,667,077 31
svg vue svgo

Version History

Version Released Vue License
0.3.0 ^2.3.3 MIT
0.2.0 ^2.3.3 MIT
0.1.1 ^2.3.3 MIT
0.1.0 ^2.3.3 MIT
0.0.6 ^2.3.3 MIT