1.0.2 • Published 2 years ago
vue-sonar v1.0.2
vue-sonar
An animated responsive sonar made by SVG for Vue 3
Demo
A demo of the package is available HERE
Getting Started
- Install it using NPM
npm i vue-sonar- Import it into your vue file
import VueSonar from 'vue-sonar';- Register it (globally or locally)
components: {
VueSonar
}- Add it to your template with its parameters (Could be bound)
<VueSonar
:radius="radius"
:background="background"
:hand="hand"
:dots="dots"
/>Parameters
| Name | Type | Map | Description |
|---|---|---|---|
| radius | Integer | the radius of the sonar board | |
| background | Object | {color: Stringpattern: BooleanpatternColor: String} | some properties about the style of the background of sonar board |
| hand | Object | {color: Stringwidth: Integer} | some properties about the style of the hand of sonar |
| dots | Array of Objects | {cx: Integer,cy: Integerr: Integercolor: Stringblink: Boolean} | each object inside this array stands for a dot in rader board. cx: x of the center of the dot, it grows the same as Descartian chart in mathcy: y of the center of the dot, it grows from top to bottom unlike Descartian chart in mathr: the radius of the dotcolor: the background color of the dotblink: whether the dot should blink or not |