sl-vue-tree
Version:
draggable tree vue component
109 lines (90 loc) • 2.25 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sl-vue-tree</title>
<link rel="stylesheet" href="../dist/sl-vue-tree-minimal.css">
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script src="../dist/sl-vue-tree.js"></script>
</head>
<body>
<div id="app">
<h2> Sl-vue-tree - minimal css</h2>
<a href="./minimal-theme.html" target="_blank">Source code</a>
<div class="row">
<div class="tree-container">
<sl-vue-tree v-model="nodes" :show-branches="true"></sl-vue-tree>
</div>
<div class="json-preview">
<pre>{{ JSON.stringify(nodes, null, 4)}}</pre>
</div>
</div>
</div>
<script>
var nodes = [
{title: 'Item1', isLeaf: true},
{title: 'Item2', isLeaf: true, data: { visible: false }},
{title: 'Folder1'},
{
title: 'Folder2', isExpanded: true, children: [
{title: 'Item3', isLeaf: true},
{title: 'Item4', isLeaf: true},
{
title: 'Folder3', children: [
{title: 'Item5', isLeaf: true}
]
}
]
},
{title: 'Folder5', isExpanded: false},
{title: 'Item6', isLeaf: true},
{title: 'Item7', isLeaf: true, data: { visible: false }},
{
title: 'Folder6', children: [
{
title: 'Folder7', children: [
{title: 'Item8', isLeaf: true},
{title: 'Item9', isLeaf: true}
]
}
]
}
];
new Vue({
el: '#app',
components: { SlVueTree: SlVueTree },
data: function () {
return {
nodes: nodes,
lastEvent: 'No last event'
}
}
})
</script>
<style>
body {
background: #050d12;
font-family: Arial;
color: rgba(255, 255, 255, 0.5);
}
a {
color: #bbb;
}
.row {
display: flex;
margin-bottom: 10px;
}
.tree-container {
flex-grow: 1;
}
.json-preview {
flex-grow: 1;
margin-left: 10px;
background-color: #13242d;
border: 1px solid black;
padding: 10px;
}
</style>
</body>
</html>