dv-scalebar

comes in two flavours -
As a framework-agnostic web component, and as a Vue component with minimal overhead.

$3

Getting Started

The scalebar component is cross-built as a framework-agnostic web component
created with Lit and as a framework-specific
Vue component. The Lit version is compatible with any
framework, vanilla JS, or plain HTML, with a size of approximately
69kB (26kB gzip). The Vue version, on the other hand, can only be used in
Vue projects but is lighter at around 51kB (20kB gzip) and is more
versatile.

These sizes include dv-scalebar's only dependency,
chroma.js

##### Smaller builds without dependencies

For projects where chroma.js is already in use, builds of the scalebar component
that exclude this dependency are available. This reduces its size significantly,
to about 26kB (9kB gzip) for the Lit version and 9kB (3kB gzip) for the
Vue version.

$3

``sh
$ npm install dv-scalebar
`

$3

The Lit version of the component is highly versatile and can be used in various environments; with or without a framework, and with or without a bundler. Typically, you only need to import the component in JavaScript...

` JS
import "dv-scalebar/lit"
`
...and then use it in the HTML.
` HTML

`

$3

In Vue, the use of Single File Components (SFCs, or .vue files) is quite common. To use dv-scalebar in an SFC, import it in the


`
#### Reactivity
The following example demonstrates the binding of reactive variables to attributes of the scalebar component in Vue:

` Vue



`

The use of multiple attributes in the above example can be simplified with v-bind like so...

` Vue

`

... or even with a single reactive configuration object:

` Vue



`

Usage

This page demonstrates some basic attributes that can be used to modify the scalebar component. For more detailed examples, refer to the sections in the side navigation.

$3

Without any attributes, the scalebar renders as a simple grayscale gradient.

Code
`html{4}

`
Results

$3

The scalebar can be enhanced with basic attributes such as colors, labels, ticks, and classes, as well as layout properties like vertical, reverse, and before/after.

Code
`html{4}









`
Results

$3

Code
`html{4}





`
Results

$3

Code
`html{4}



`
Results

$3

Code
`html{4}



`
Results

$3

Code
`html{4}



``
Results

$3

This was a brief overview of the four most common attributes. They are explained in more detail in the Documentation, along with additional layout and color attributes.