liquortree vuejs Laravel
21 Temmuz 2020

Laravel Vuejs Tree

ile kurtitasarim

Merhabalar bugün sizlere Laravel 6.x versiyonunda kullandığım vuejs tree menü kullanımını aktarmaya çalışacağım. Laravel Vuejs Tree nedir, nasıl kullanılır anlatmaya çalışacağım.

Vuejs LiquorTree Kullanmak

Vuejs projelerinizde recursive kullanmak elbette güzeldir lakin tree menü yapılarında kullanabileceğiniz component tavsiyem benim LiquorTree. Hem kullanımı açısından, hemde geliştirmesi ve dökümanı olan bir component.

LiquorTree

Basit bir örnek olarak yukarıdaki gibi bir çıktı alabiliyorsunuz, örnek bir kod bloğunuda aşağıda sizinle paylaşacağım.

<!DOCTYPE html>
<html>
<head>
  <title>Checkboxes</title>
  <meta charset="UTF-8">
  
  <!-- first import Vue -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/liquor-tree/dist/liquor-tree.umd.js"></script>
</head>
<body>
  <div id="app">
    <tree
      :data="treeData"
      :options="treeOptions"
    />
  </div>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {
          treeData: getTreeData(),
          treeOptions: {
          	checkbox: true,
            deletion(node) {
            	return node.checked()
            }
          }
        }
      }
    })
    
    
    function getTreeData() {
    	return [
          {
            text: 'JS: The Right Way',

            // it makes node expanded
            state: { expanded: true },
            children: [
              { text: 'Getting Started', state: { checked: true } },
              { text: 'JavaScript Code Style', state: { selected: true } },
              { text: 'The Good Parts', children: [
                { text: 'OBJECT ORIENTED', state: { checked: true }  },
                { text: 'ANONYMOUS FUNCTIONS', state: { checked: true }  },
                { text: 'FUNCTIONS AS FIRST-CLASS OBJECTS', state: { checked: true }  },
                { text: 'LOOSE TYPING', state: { checked: true }  }
              ]},
              { text: 'Patterns', children: [
                { text: 'DESIGN PATTERNS', state: { expanded: true }, children: [
                  { text: 'Creational Design Patterns', children: [
                    { text: 'Factory' },
                    { text: 'Prototype' },
                    { text: 'Mixin' },
                    { text: 'Singleton' }
                  ]},
                  { text: 'Structural Design Patterns'}
                ]},
                { text: 'MV* PATTERNS', cildren: [
                  { text: 'MVC Pattern' },
                  { text: 'MVP Pattern' },
                  { text: 'MVVM Pattern' }
                ]}
              ]}
            ]
          }
        ]
    }
  </script>
</body>
</html>

Bunun yanında size ufak bir öneride bulunabilirim, select ile tree kullanmak isterseniz, Treeselect kullanabilirsiniz.

treeselect

Nerelerde Kullanabiliriz?

Vuejs LiquorTree yapısını menülerinizde, kategori yapınızda kullanabilirsiniz. Dosya ve dizin görüntülemede kullanabilir, ekleme, silme ve düzenleme işlemleride yapabilirsiniz.

Vuejs Tree Neden

Yukarıda bahsettiğim üzeri projelerinizde sorunsuz bir şekilde kullanabileceğiniz plugin LiquorTree kütüphanesini inceleyebilirsiniz.

Nasıl Yüklenir ?

NPM
$ npm install liquor-tree

YARN
$ yarn add liquor-tree
<!-- Vue Component -->
  <template>
    <tree
        :data="items"
        :options="options"
        ref="tree"
    />
  </template>

  <script>
    import Vue from 'Vue'
    import LiquorTree from 'liquor-tree'

    Vue.use(LiquorTree)

    export default {
      ...
      data() {
        return {
          items: [
            {text: 'Item 1'},
            {text: 'Item 2'},
            {text: 'Item 3', children: [
              {text: 'Item 3.1'},
              {text: 'Item 3.2'}
            ]}
          ],
          options: {
            checkbox: true
          }
        }
      }
      ...
    }
  </script>