Home

Awesome

VueTagsBall

Description

create a 3d tags ball for vue2

Demo

demo

Install

npm install --save vue-tags-ball

Usage

//Gobal method
import TagsBall from 'vue-tags-ball'
Vue.use(TagsBall)

//Component method
import TagsBall from 'vue-tags-ball'
//...
components: {
    "tags-ball":TagsBall
  },

Example

<tags-ball v-bind:style='{"border":"2px solid black"}' :width='200' :tags='tags'/>

tags is a String[],like {"tag1","tag2","tag3"}.and you can bind your own style.

Warning: just watching the tags and stop,other props only init.

Props

PropertyTypeDescriptionDefault
tagsArrayall the tag[]
stopBooleanstop the animationfalse
widthNumberinit the canvas widht200
heightNumberinit the canvas height200
radiusNumberinit the ball radius100
fontStringinit the tag's label font"24px monaco"
fontMaxNumberinit the tag's label max width60
colorStringinit the label's color"#fc8457"