suusan2go / Vuetify Draggable Treeview
Licence: mit
Vuetify draggable v-treeview component
Stars: ✭ 51
Projects that are alternatives of or similar to Vuetify Draggable Treeview
react-dnd-treeview
A draggable / droppable React-based treeview component. You can use render props to create each node freely.
Stars: ✭ 207 (+305.88%)
Mutual labels: drag-and-drop, treeview
Historicprocesstree
An Incident Response tool that visualizes historic process execution evidence (based on Event ID 4688 - Process Creation Event) in a tree view.
Stars: ✭ 46 (-9.8%)
Mutual labels: treeview
Hrscan2
A self-hosted drag-and-drop, nosql yet fully-featured file-scanning server.
Stars: ✭ 25 (-50.98%)
Mutual labels: drag-and-drop
Bootstrap Vue Treeview
A treeview component for Bootstrap and Vue.js 2.0+
Stars: ✭ 34 (-33.33%)
Mutual labels: treeview
Ng2 Dnd
Angular 2 Drag-and-Drop without dependencies
Stars: ✭ 861 (+1588.24%)
Mutual labels: drag-and-drop
Canvaz
𝌕 Visual component-based content editor for React
Stars: ✭ 40 (-21.57%)
Mutual labels: drag-and-drop
Graphview
Android GraphView is used to display data in graph structures.
Stars: ✭ 918 (+1700%)
Mutual labels: treeview
Flowy
The minimal javascript library to create flowcharts ✨
Stars: ✭ 8,636 (+16833.33%)
Mutual labels: drag-and-drop
Angular Tree Component
A simple yet powerful tree component for Angular (>=2)
Stars: ✭ 1,031 (+1921.57%)
Mutual labels: treeview
Silex
Silex is a static website builder in the cloud.
Stars: ✭ 958 (+1778.43%)
Mutual labels: drag-and-drop
Django Starcross Gallery
Django Gallery app with justified image layout, infinite scrolling and drag & drop support
Stars: ✭ 28 (-45.1%)
Mutual labels: drag-and-drop
Kanban React
The Kanban Application with multiple backend languages.
Stars: ✭ 15 (-70.59%)
Mutual labels: drag-and-drop
Vuetify Material Dashboard
Vuetify Material Dashboard - Open Source Material Design Admin
Stars: ✭ 1,023 (+1905.88%)
Mutual labels: vuetify
Vue Stack
Minimalistic Boilerplate for FullStack Express and Vue.js applications
Stars: ✭ 26 (-49.02%)
Mutual labels: vuetify
Angular Draggable Mat Tree
Example implementation of drag and drop on Angular Material Tree
Stars: ✭ 47 (-7.84%)
Mutual labels: drag-and-drop
Veluxi Starter
Veluxi Vue.js Starter Project with Nuxt JS and Vuetify
Stars: ✭ 39 (-23.53%)
Mutual labels: vuetify
Hummingbird Treeview
A powerful and fast jQuery treeview plugin
Stars: ✭ 50 (-1.96%)
Mutual labels: treeview
React Flow Chart
A flexible, stateless, declarative flow chart library for react.
Stars: ✭ 1,051 (+1960.78%)
Mutual labels: drag-and-drop
vuetify-draggable-treeview
Drag and drop v-treeview
(Vuetify Treeview) component.
Installation
yarn add vuetify-draggable-treeview
// @NOTE: This component requires vue, vuetify, vuedraggable as peerDependency.
yarn add vuedraggable
Setup
import VuetifyDraggableTreeview from 'vuetify-draggable-treeview'
Vue.use(VuetifyDraggableTreeview)
// or manually import
VuetifyDraggableTreeview
export default Vue.extend({
components: {
VuetifyDraggableTreeview
}
})
Usage
Basic Example
<template>
<v-draggable-treeview
group="test"
v-model="items"
></v-draggable-treeview>
</template>
<script>
export default {
data() {
return {
items: [{ id: 1, name: "hoge", children: [{ id:11, name: "hoge-child1" }] }]
}
}
}
</script>
Drag and drop only in children.
<template>
<v-draggable-treeview
v-model="items"
></v-draggable-treeview>
</template>
<script>
export default {
data() {
return {
items: [{ id: 1, name: "hoge", children: [{ id:11, name: "hoge-child1" }] }]
}
}
}
</script>
Using slot
<template>
<v-draggable-treeview v-model="items" group="hoge">
<template v-slot:prepend="{ item }">
<v-icon>mdi-file</v-icon>
</template>
<template v-slot:label="{ item }">
<span class="primary--text">{{ item.name }}</span>
</template>
<template v-slot:append="{ item }">
<template
v-if="item.children != null && item.children.length > 0"
>
has {{ item.children.length }} children
</template>
</template>
</v-draggable-treeview>
</template>
<script>
export default {
data() {
return {
items: [{ id: 1, name: "hoge", children: [{ id:11, name: "hoge-child1" }] }]
}
}
}
</script>
API
Currently, this component dose not support all original v-treeview
component's props, slots, event.
Props
Name | Type | Default | Description |
---|---|---|---|
value | Object | [] | items for treeview. item-key , item-text , item-children are not customizable currently. value can be like { id: 1, name: "test", children: []} . |
group | string | null | group name for vuedraggable. If this props not provided, drag and drop are enabled only in children. |
expand-icon | string | 'mdi-menu-down' | mdi string for the expand icon. |
Events
Name | Value | Description |
---|---|---|
input | array | Emits the array of selected items when this value changes |
Slots
Name | Props | Description |
---|---|---|
append | { item: any, open: boolean } | Appends content after label |
label | { item: any, open: boolean } | Label content |
prepend | { item: any, open: boolean } | Prepends content before label |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].