Components
Minimap

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

cornerDefault: "SE"
enum

Controls corner placement of the Minimap component.

widthDefault: "100"
number

Width dimension of the Minimap component.

heightDefault: "0"
number

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

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.