Getting started

The Minimap component can be rendered by either passing the shorthand prop minimap to the Svelvet component or by passing the entire Minimap component as a child, allowing further configuration via props.

Nodes can be hidden/unhidden on the Minimap if you pass the hideable prop.

When passing the component to Svelvet, you must specify slot=“minimap”
  import { Svelvet } from 'svelvet';

  <Minimap width="{100}" corner="NE" mapColor="blue" slot="minimap" />


cornerDefault: "SE"

Controls corner placement of the Minimap component.

widthDefault: "100"

Width dimension of the Minimap component.

heightDefault: "0"

Height dimension of the Minimap component. If not passed, Minimap will render out as a square with both dimensions equal to the width value.

hideableDefault: "false"

Boolean controlling whether Nodes can be hidden by clicking on their Minimap representation.

mapColorDefault: "theme dependent"
CSS Color String

Background color of minimap.

nodeColorDefault: "Node Color"
CSS Color String

Color of the minimap node elements. Defaults to actual node color.

borderColorDefault: "theme dependent"
CSS Color String

Border color of the Minimap wrapper.