Zircle UI
made with Vuejs

Zircle UI

这是一个用于开发可缩放用户界面(ZUI)的前端库。

相关问答
暂无相关问题
查看全部
简介及使用教程

Zircle UI是一个用于开发可缩放用户界面(ZUI)的前端库,基于Vue.js和JavaScript,并带有一组组件:按钮、旋钮、滑块、滚动条、对话框、查看控制器和列表。

安装

Npm

npm i zircle

Yarn

yarn add zircle

浏览器

  <!-- 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">

使用

全局引入

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

home组件

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

App.vue

<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>

示例

final.gif

作者

相关项目

这是一个基于Vue.js的Github样式的日历热图。
这是一个基于Splide的Vue滑块组件。
这是一个基于Vue的滚动条组件。
这是一个Bootstrap风格简单分页组件。
这是一个Vue.js 2打字机效果组件 。
这是一个漂亮的Vue聊天组件。
这是一个基于Vue.js的模拟命令行效果的动画组件。