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