未来感のあるズーム可能なユーザーインターフェイス「zircle-ui」

by kabanoki

HTML

<link rel="stylesheet" href="https://unpkg.com/zircle/dist/zircle.css">
<div id="app">
  <z-canvas :views='$options.components'></z-canvas>
  <script type="text/x-template" id="foo">
    <z-view>Foo View
      <z-spot
        slot="extension"
        :angle="145"
        to-view="bar1">Bar1
      </z-spot>
      <z-spot
        slot="extension"
        :angle="45"
        to-view="bar2">Bar2
      </z-spot>
    </z-view>
  </script>
  <script type="text/x-template" id="bar1">
    <z-view>Bar1 View
      <z-spot
        slot="extension"
        :angle="0"
        to-view="bar1bar1">Bar1bar1
      </z-spot>
    </z-view>     
  </script>
  <script type="text/x-template" id="bar1bar1">
    <z-view>Bar1bar1 View</z-view> 
  </script>
  <script type="text/x-template" id="bar2">
    <z-view>Bar2 View
      <z-spot
        slot="extension"
        :angle="145"
        to-view="bar2bar1">Bar2bar1
      </z-spot>
      <z-spot
        slot="extension"
        :angle="15"
        to-view="bar2bar2">Bar2bar1
      </z-spot>
    </z-view>     
  </script>
  <script type="text/x-template" id="bar2bar1">
    <z-view>bar2bar1 View</z-view> 
  </script>
  <script type="text/x-template" id="bar2bar2">
    <z-view>bar2bar2 View</z-view>     
  </script>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/zircle.umd.js"></script>

Vue

const foo = {
  template: '#foo'
}

const bar1 = { 
  template: '#bar1',    
};

const bar1bar1 = { 
  template: '#bar1bar1',    
};

const bar2 = { 
  template: '#bar2',    
};

const bar2bar1 = { 
  template: '#bar2bar1',    
};

const bar2bar2 = { 
  template: '#bar2bar2',    
};

let app = new Vue({
  el: '#app',
  components: {
    foo,
    bar1,
    bar1bar1,
    bar2,
    bar2bar1,
    bar2bar2
  },
  mounted () {
    this.$zircle.config({
      mode: 'mixed',
      style: {
        theme: 'white'
      }
    })
    this.$zircle.setView('foo')
  }
});