<script src="https://unpkg.com/vue"></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="background-color: #34495e">
  </z-canvas>
</div>
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
const one = {
    template:`<z-view style="background-color: white">
      <img slot="image" src="https://raw.githubusercontent.com/zircleUI/docs/master/docs/.vuepress/public/cubata.png" width="100%" height="100%" />
      <section slot="extension">
        <z-spot 
          button
          :angle="-45"  
          size="large">
          <h1>Cuba Libre</h1>
        </z-spot>
        <z-spot 
          :angle="180"  
          size="medium" 
          to-view="mix">
          Mixing
        </z-spot>
        <z-spot 
          :angle="45"  
          size="small" 
          to-view="recipe"
          label="Ingredients">
          3
        </z-spot>
      </section>
</z-view>`
  }
  const recipe = {
    template:
    `<z-view>
        <h3>12 cl Cola</h3>
        <h3>5 cl Light rum</h3>
        <h3>1 cl Fresh lime juice</h3>      
    </z-view>`
  }
  const mix = {
    name: 'mix',
    template:`<z-view>
        
            Mix all ingredients in a glass filled with ice. <br>Garnish with lime wedge.
      
    </z-view>`
  }
new Vue({
  el: '#app',
  components: {
    one,
    mix,
    recipe
  },
  mounted () {
    this.$zircle.setView('one')
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.