Vue Ecosystem

by Zircle UI http://zircle.io

by Antério Vieira

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/zircle"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
  <div id="app">

    <z-canvas style="background-color: #34495e;">
    
      <z-view-manager :list='$options.components' />
      
    </z-canvas>

  </div>

CSS

@import url('https://unpkg.com/zircle/dist/zircle.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
.z-content.label{
      border-radius: 0%
      font-size: calc(12px + 1vmax);
      margin-top: calc(2vmax);
      pointer-events: none;
    }
    .main {
      background-color: #fff; color: #34495e;

    }
    .active {
      background-color: #fff; color: #42b983;

    }
    .inactive {
      background-color: #42b983; color: #fff;
    }

JavaScript

// If you like this demo visit: 
// https://github.com/zircleUI/zircleUI
// http://zircle.io

var demo = {angle: 0}

var demo1 = {angle1: 0}

const store = {
  debug: true,
  state: {
    ang: 0,
    ang1: 0,
    dist: 0,
    mov: TweenLite.to(demo, 700, {angle:365, repeat: -1, onUpdate: function () {
      store.state.ang = demo.angle
    }}),
    mov1: TweenLite.to(demo1, 700, {angle1:365, repeat: -1, onUpdate: function () {
      store.state.ang1 = demo1.angle1
    }}),
    ecosystem: [
      {name: 'Help', icon: 'fa-question', viewName: 'help',elements: [
        {name: 'Forum', url: 'https://forum.vuejs.org/', icon: 'fa-comments'},
        {name: 'Chat', url: 'https://chat.vuejs.org/', icon: 'fa-comments-o'}
        ]},
      {name: 'Tooling', icon: 'fa-wrench', viewName: 'tooling', elements: [
        {name: 'Devtools', url: 'https://github.com/vuejs/vue-devtools', icon: 'fa-code'},
        {name: 'Webpack Template', url: 'https://vuejs-templates.github.io/webpack', icon: 'fa-file-code-o'},
        {name: 'Vue Loader', url: 'https://vue-loader.vuejs.org/', icon: 'fa-spinner'}]
      },
      {name: 'Core Libraries', icon: 'fa-star', viewName: 'core',elements: [
        {name: 'Vue Router', url: 'https://router.vuejs.org/', icon: 'fa-hdd-o'},
        {name: 'Vuex', url: 'https://vuex.vuejs.org/', icon: 'fa-exchange'},
        {name: 'Vue Server Renderer', url: 'https://ssr.vuejs.org/', icon: 'fa-puzzle-piece'}
        ]},
      {name: 'News', icon: 'fa-newspaper-o', viewName: 'news', elements: [
        {name: 'Roadmap', url: 'https://github.com/vuejs/roadmap', icon: 'fa-map-o'},
        {name: 'Twitter', url: 'https://twitter.com/vuejs', icon: 'fa-twitter'},
        {name: 'Blog', url: 'https://medium.com/the-vue-point', icon: 'fa-rss'},
        {name: 'Jobs', url: 'https://vuejobs.com/?ref=vuejs', icon: 'fa-money'}
        ]},
      {name: 'Resource Lists', icon: 'fa-bookmark-o', viewName: 'resources', elements: [
        {name: 'Official Repos', url:...