Comment ajouter Bootstrap Vue.js TreeView Exemple

Question

Le code pour une Vue.js treeview ressemble à ceci:

HTML:

<!-- item template --> 
<script type="text/x-template" id="item-template"> 
    <li> 
    <div 
     :class="{bold: isFolder}" 
     v-on:click="toggle" 
     v-on:dblclick="changeType"> 
     {{model.name}} 
     <span v-if="isFolder">[{{open ? '-' : '+'}}]</span> 
    </div> 
    <ul v-show="open" v-if="isFolder"> 
     <item 
     class="item" 
     v-for="model in model.children" 
     :model="model"> 
     </item> 
     <li class="add" v-on:click="addChild">+</li> 
    </ul> 
    </li> 
</script> 

<p>(You can double click on an item to turn it into a folder.)</p> 

<!-- the demo root element --> 
<ul id="demo"> 
    <item 
    class="item" 
    :model="treeData"> 
    </item> 
</ul> 

Script:

// demo data 
var data = { 
    name: 'My Tree', 
    children: [ 
    { name: 'hello' }, 
    { name: 'wat' }, 
    { 
     name: 'child folder', 
     children: [ 
     { 
      name: 'child folder', 
      children: [ 
      { name: 'hello' }, 
      { name: 'wat' } 
      ] 
     }, 
     { name: 'hello' }, 
     { name: 'wat' }, 
     { 
      name: 'child folder', 
      children: [ 
      { name: 'hello' }, 
      { name: 'wat' } 
      ] 
     } 
     ] 
    } 
    ] 
} 

// define the item component 
Vue.component('item', { 
    template: '#item-template', 
    props: { 
    model: Object 
    }, 
    data: function() { 
    return { 
     open: false 
    } 
    }, 
    computed: { 
    isFolder: function() { 
     return this.model.children && 
     this.model.children.length 
    } 
    }, 
    methods: { 
    toggle: function() { 
     if (this.isFolder) { 
     this.open = !this.open 
     } 
    }, 
    changeType: function() { 
     if (!this.isFolder) { 
     Vue.set(this.model, 'children', []) 
     this.addChild() 
     this.open = true 
     } 
    }, 
    addChild: function() { 
     this.model.children.push({ 
     name: 'new stuff' 
     }) 
    } 
    } 
}) 

// boot up the demo 
var demo = new Vue({ 
    el: '#demo', 
    data: { 
    treeData: data 
    } 
}) 

Y at-il façon dont je peux ajouter le style Bootstrap à cela, pour faire ressembler l'arborescence quelque chose comme le premier exemple ci-dessous:

J'ai très peu d'expérience frontend et ne comprends pas vraiment où mettre le CSS ici. Je ne comprends pas vraiment la partie du code où il est mélangé script et cshtml (à l'intérieur <script type="text/x-template" id="item-template">).

Answer 1

Pour ajouter à votre page d'amorçage il suffit d'inclure les fichiers source:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 

En ce qui concerne les styles spécifiques, je ne vais pas complètement la configuration de votre interface utilisateur, ce n'est pas ce débordement de la pile est de . Vous pouvez suivre les instructions sur ce github qui devraient vous permettre de:

https://github.com/jonmiles/bootstrap-treeview