Zircle UI : A circular zooming UI LIbrary powered by Vue.js

zircleUI

Zircle UI is a circular zooming user interface library based on Vue.js. It mixes two principles: circular shapes and zooming navigation in the aim of strengthening each other and create a good user experience.

Zooming slider

Counter

The library provides the ability to create circular zooming with multiple nested levels, displaying images and data. Along with the above, there are more live examples and documentation, at http://zircle.io.

Features

  • Zooming navigation up to 9 level depth.
  • It works well on mobile devices and big screens as it is responsive.
  • It comes with a minimal set of UI components to build your app.
  • It is possible to customize themes and styles to fit your needs.
  • Using Zircle with Vue-Router

Installation

There are several options to setup and start using it.

Run

npm install zircle --save

For your initial setup go through the starter templates and use the single-file components example using the webpack-template of vue-cli

main.js

import Vue from 'vue'
import app from './App'
import zircle from 'zircle'
import 'zircle/dist/zircle.min.css'
Vue.use(zircle)
new Vue({
  el: '#app',
  components: {
    app
  },
  template: '<app/>'
})

App.vue file 

<template>
    <z-canvas>
      <z-panel view="home">
        {{ msg }}
      </z-panel>
    </z-canvas>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

From there you can use the API to expand it or search the examples for customization options.

Note: When you install Zircle in a fresh project, Vue will also be installed since is a dependency of Zircle. On the other hand, you can install Zircle after you have started a project based on Vue.

Zircle is in active development. Feedbacks and contributions are very welcome!

The project is open-source under an MIT licence. By @ZircleUI