​
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”
App.svelte
<script>
  import { Svelvet } from 'svelvet';
</script>

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

​
Props

​
corner
enum
default: "SE"

Controls corner placement of the Minimap component.

​
width
number
default: "100"

Width dimension of the Minimap component.

​
height
number
default: "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.

​
hideable
boolean
default: "false"

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

​
mapColor
CSS Color String
default: "theme dependent"

Background color of minimap.

​
nodeColor
CSS Color String
default: "Node Color"

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

​
borderColor
CSS Color String
default: "theme dependent"

Border color of the Minimap wrapper.

ResizerControls