zircle-ui

Getting Started

TIP

I've been working on a new zooming library.

Give Zumly a try and joing our community at https://zumly.org

TIP

The guide assumes intermediate level knowledge of HTML, CSS, JavaScript and Vue.js. To start learning Vue.js I suggest its official documentation site

Installation

Direct download

Just download zircle-ui from Github. You need to download the zircle.umd.js or the zircle.umd.min.js file along with the zircle.css file.

Content delivery networks (CDN)

Include https://unpkg.com/zircle in your project with <script> tag. With CDN you will have the latest version of zircle-ui as soon as it is published to NPM. You can also browse the source of the npm package at https://unpkg.com/zircle/

NPM or Yarn

NPM or Yarn are the recommended installation method for zircle-ui, if you are building medium to large scale applications.

Create a project folder and inside it run:

npm install zircle
# OR
yarn add zircle

TIP

See:

Quick start

There are several options to setup and start using zircle-ui.

Code Sandbox

The easiest way to try and start using zircle-ui is using JSFiddle or Codepen

For zircle-ui projects based on vue-cli 3 you can try CodeSandbox

Browser

After you have installed zircle ui using direct download or CDN, the following starter template creates a Vue Instance and provides <z-canvas> component to start the development of your zircle-ui application.

<!DOCTYPE html>
<html>
  <head>
  <!-- Vue.js -->
  <script type="text/javascript" src="https://unpkg.com/vue"></script>
 
  <!-- Zircle from CDN-->
  <script type="text/javascript" src="https://unpkg.com/zircle"></script>
  <link href="https://unpkg.com/zircle/dist/zircle.css" rel="stylesheet">

  </head>
  <body>
  <div id="app">
    <z-canvas :views="$options.components"></z-canvas>
  </div>

  <script>
    const home = {
      template: `<z-view>Hello World!</z-view>`
    }
    new Vue({
      el: '#app',
      components: {
        home
      },
      mounted () {
        this.$zircle.setView('home')
      }
    })
  </script>
  </body>
</html>

See:

Single File Components and vue-cli

As Vue documentation explains, with the previous setup you can work very well for small to medium-sized projects. However, in more complex projects it is better tp use Single File Components (SFC).

Vue-cli is a powerful tool to develop complex projects. So, after you have installed and run vue-cli as it is described in the official Vue cli docs, you can install zircle-ui with NPM or Yarn and add the following code to your vue-cli project:

In the main.js file add this code:



 
 
 




import Vue from 'vue'
import App from './App'
import zircle from 'zircle'
import 'zircle/dist/zircle.css'
Vue.use(zircle)
new Vue({
  render: h => h(App)
}).$mount('#app')

In the App.vue file add this code:

<template>
  <div id="app">
    <z-canvas :views="$options.components"></z-canvas>
  </div>
</template>

<script>
  import home from './components/home'
  export default {
    components: {
      home
    },
    mounted () {
      this.$zircle.setView('home')
    }
  }
</script>

Create the home.vue view in the /components folder:

<template>
  <z-view>
    This screen was zirclelized!
  </z-view>
</template>

See:

TIP

Before starting a zircle-ui project with vue-cli you can play online with CodeSandbox

Edit this page

← Design guide →