Skip to main content

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