Zircle Sandbox

Sandbox for simple Zircle apps

by kabanoki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/zircle"></script>
<link href="https://unpkg.com/zircle/dist/zircle.css" rel="stylesheet">
<div id="app">
  <z-canvas :views='$options.components'style="width: 50%; height:100%; border: 2px solid red;">
  </z-canvas>
</div>

JavaScript

const foo = {
  template: `<z-view>
  Foo View
  <z-spot
  slot="extension"
  :angle="145"
  to-view="bar">
  Bar
  </z-spot><z-spot
  slot="extension"
  :angle="45"
  to-view="bar2">
  Bar2
  </z-spot></z-view>`
}
const bar = {
  template: `<z-view>
  Bar View
  </z-view>`
}
const bar2 = {
  template: `<z-view>
  Bar2 View
  </z-view>`
}
new Vue({
  el: '#app',
  components: {
    foo,
    bar,
    bar2
  },
  mounted () {
    this.$zircle.config({
      mode: 'mixed',
      style: {
        theme: 'white'
      }
    })
    this.$zircle.setView('foo')
  }
})