Zircle-ui drink recipe

index.html

<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: #4A90E2">
  </z-canvas>
  <footer>C. 2018 Matt Bracco</footer>
</div>

script.js

const one = {
    template:`<z-view style="background-color: white">
      <img slot="image" src="https://cl.ly/c8356ef60964" width="100%" height="100%" />
      <section slot="extension">
        <z-spot 
          button
          :angle="-5"  
          size="large">
          <h1>"Over the Wall"</h1>
        </z-spot>
        <z-spot 
          :angle="180"  
          size="medium" 
          to-view="mix">
          Mixing
        </z-spot>
        <z-spot 
          :angle="45"  
          size="medium" 
          to-view="recipe"
          label="Ingredients">
          5
        </z-spot>
      </section>
</z-view>`
  }
  const recipe = {
    template:
    `<z-view>
        <h3>1:2:4 Ratio: Lime Juice, Pomegranate Juice, and Tequila</h3>
        <h3>1 pt. Seltzer or soda water</h3>
        <h3>1 pt. Ginger beer</h3>      
    </z-view>`
  }
  const mix = {
    name: 'mix',
    template:`<z-view>
        
            Mix lime, pomegranate and tequila portions in tall cocktail glass filled with ice. <br>Add 1 part seltzer and 1 part ginger beer.</br>
      <br> Enjoy!</br>
    </z-view>`
  }
new Vue({
  el: '#app',
  components: {
    one,
    mix,
    recipe
  },
  mounted () {
    this.$zircle.setView('one')
  }
})

style.css

@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');

zircle-ui-drink-recipe.markdown

Zircle-ui drink recipe

Docs and examples http://zircle.io/

A Pen by Carl V Lewis on CodePen.

License.