vue-tree-nav
Version:
Navigation tree menu component with nice integration with vue-router
107 lines (106 loc) • 3.16 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue Tree Nav</title>
<style>
fieldset {
margin: 40px;
}
th, td {
padding: 5px;
}
textarea {
width: 100%;
}
img {
margin: auto;
}
button {
margin-left: 10px;
}
</style>
</head>
<body style="margin:0px">
<div id="app">
<vue-tree-nav
:location="$route.fullPath"
v-bind="treeNav"
>
</vue-tree-nav>
<div style="height:70px"></div>
<router-view></router-view>
<fieldset>
<legend>Samples</legend>
<p>Change color schema of the <b>vue-tree-nav</b> with one of our pre build themes</p>
<div>
<select v-model="f.schema">
<option v-for="s in schemas">{{s}}</option>
</select>
<button @click="reset(f.schema)">Change Color Schema</button>
</div>
</fieldset>
<fieldset>
<legend>Settings</legend>
<p>Customize <b>vue-tree-nav</b> layout</p>
<table>
<tr>
<th>showPath:</th>
<td><input type="checkbox" v-model="treeNav.showPath"></td>
</tr>
<tr>
<th>barScale:</th>
<td><input type="number" step="0.1" v-model.number="treeNav.barScale"></td>
</tr>
<tr>
<th><label>sideScale:</label></th>
<td><input type="number" step="0.1" v-model.number="treeNav.sideScale"></td>
</tr>
<tr>
<th>activeColor:</th>
<td><input type="color" v-model="treeNav.activeColor"></td>
</tr>
<tr>
<th>fontColor:</th>
<td><input type="color" v-model="treeNav.fontColor"></td>
</tr>
<tr>
<th>hoverColor:</th>
<td><input type="color" v-model="treeNav.hoverColor"></td>
</tr>
<tr>
<th>bgColor:</th>
<td><input type="color" v-model="treeNav.bgColor"></td>
</tr>
<tr>
<th>Style:</th>
<td><input type="text" v-model="treeNav.style"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Top Bar Left</legend>
<p>Change links and dropdowns on the left side of <b>vue-tree-nav</b></p>
<textarea rows="8" v-model="f.left" @blur="parse"></textarea>
</fieldset>
<fieldset>
<legend>Top Bar Right</legend>
<p>Change links and dropdowns on the right side of <b>vue-tree-nav</b></p>
<textarea rows="8" v-model="f.right" @blur="parse"></textarea>
</fieldset>
<fieldset>
<legend>Side Bar</legend>
<p>Change links and dropdowns on the side panel of <b>vue-tree-nav</b></p>
<textarea rows="8" v-model="f.side" @blur="parse"></textarea>
</fieldset>
<fieldset>
<legend>Result Json</legend>
<p>If you like the result you can use directly this json with <b>v-bind</b> prop inside the <b>vue-tree-nav</b> tag</p>
<div style="white-space:pre-wrap">{{feedback()}}</div>
</fieldset>
</div>
<script src="app.js"></script>
</body>
</html>