vue-sonar

An animated responsive sonar made by SVG for Vue 3

Demo

A demo of the package is available HERE

Getting Started

1. Install it using NPM

npm i vue-sonar

2. Import it into your vue file

import VueSonar from 'vue-sonar';

3. Register it (globally or locally)

components: {
    VueSonar
}

4. 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 |