v-history-path
v0.1.1
Published
A lightweight Vue 3 component for the 🐍 snake history path effect. It takes in any custom component and joins them with somewhat customizable arrows.
Downloads
3
Readme
v-history-path
Demo: StackBlitz
https://github.com/xon52/v-history-path/assets/30713944/c25227c3-301b-454d-bb29-e5bd7db03a8f
Usage
Install: npm i v-history-path
import VHistoryPath from 'v-history-path'<VHistoryPath
:items="items"
:item-height="100"
:item-width="200"
:item-gap="40"
:path-width="8"
:path-color="grey"
v-slot="{ item }"
>
<YourCustomComponent :iterated-item="item" />
</VHistoryPath>
Props
- items :
Array<T> - itemHeight:
number - itemWidth:
number - itemGap:
number - pathWidth:
number - pathColor:
string
Scoped Slot Props
- item :
<T>
Contribution
Very happy for improvements - this was just something I needed and I thought would be interesting to make reusable. Submit a PR 🚀.
License
This project is licensed under the MIT License.