assembled with blockbuilder.org
Toy example combinining bootstrap navbar with vue and vue-router. For a little sizzle, use d2b sunburst for two of the routes. To get the full effect, run standalone.
Last active
February 13, 2018 01:38
-
-
Save timelyportfolio/05d1548ec75fe12182084a10334e302e to your computer and use it in GitHub Desktop.
vue + vue-router + bootstrap + d2b
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <script | |
| src="https://code.jquery.com/jquery-3.2.1.min.js" | |
| integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" | |
| crossorigin="anonymous"></script> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> | |
| <!-- Latest compiled and minified JavaScript --> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> | |
| <script src="https://unpkg.com/vue/dist/vue.js"></script> | |
| <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> | |
| <script src="https://unpkg.com/d3"></script> | |
| <script src="https://unpkg.com/[email protected]/build/d2b.js"></script> | |
| <script src="https://unpkg.com/[email protected]/dist/vue-d2b.min.js"></script> | |
| </head> | |
| <body style="background-color:white;"> | |
| <div id="app"> | |
| <nav class="navbar navbar-default"> | |
| <div class="container-fluid"> | |
| <div class="navbar-header"> | |
| <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </button> | |
| <a class="navbar-brand" href="#">Home</a> | |
| </div> | |
| <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> | |
| <ul class="nav navbar-nav"> | |
| <li> | |
| <router-link to="/d2btree">d2b tree</router-link> | |
| </li> | |
| <li> | |
| <router-link to="/minimal">minimal tree</router-link> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <div> | |
| <router-view></router-view> | |
| </div> | |
| </div> | |
| <script>'use strict'; | |
| Vue.component('sunburst-chart', vued2b.ChartSunburst); | |
| // 1. Define route components. | |
| // These can be imported from other files | |
| var sunb = { | |
| template: '\n <div style=\'height:400px;\'>\n <sunburst-chart :data = \'sunburstChartData\'></sunburst-chart>\n </div>\n ', | |
| props: ['sunburstChartData'] | |
| }; | |
| var home = { | |
| template: '\n<div class=\'container\'>\n <h3>d2b Examples with vue-router and bootstrap</h3>\n <p>\n I have really enjoyed playing with Vue. Until now, though\n my examples have been small experimental bits and pieces\n and nothing like a real application. For my first more realistic\n application, I will use vue-router with bootstrap navbar to\n render d2b sunbursts based on the route.\n </p>\n <p>\n I could very easily be doing this incorrectly, but it seems\n I have the pattern nearly correct.\n </p>\n</div>\n ' | |
| }; | |
| var tree1 = { | |
| label: 'root', | |
| children: [{ | |
| label: 'child 1', | |
| children: [{ | |
| label: 'child 1-1', | |
| size: 10 | |
| }, { | |
| label: 'child 1-2', | |
| children: [{ | |
| label: 'child 1-2-1', | |
| size: 5 | |
| }, { | |
| label: 'child 1-3-1', | |
| size: 8 | |
| }] | |
| }, { | |
| label: 'child 1-3', | |
| children: [{ | |
| label: 'child 1-3-1', | |
| children: [{ | |
| label: 'child 1-3-1-1', | |
| size: 2 | |
| }, { | |
| label: 'child 1-3-1-2', | |
| size: 5 | |
| }] | |
| }, { | |
| label: 'child 1-3-2', | |
| size: 8 | |
| }] | |
| }] | |
| }, { | |
| label: 'child 2', | |
| size: 25 | |
| }] | |
| }; | |
| var tree2 = { | |
| label: 'root', | |
| children: [{ label: 'a', size: 10 }, { label: 'b', size: 20 }] | |
| }; | |
| var routes = [{ path: '/', component: home }, { path: '/d2btree', component: sunb, props: { sunburstChartData: tree1 } }, { path: '/minimal', component: sunb, props: { sunburstChartData: tree2 } }]; | |
| // 3. Create the router instance and pass the `routes` option | |
| // You can pass in additional options here, but let's | |
| // keep it simple for now. | |
| var router = new VueRouter({ | |
| routes: routes // short for routes: routes | |
| }); | |
| // 4. Create and mount the root instance. | |
| // Make sure to inject the router with the router option to make the | |
| // whole app router-aware. | |
| var app = new Vue({ | |
| router: router | |
| }).$mount('#app');</script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment