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聊天组件。
这是一个基于Vue.js的模拟命令行效果的动画组件。
Vue.js的文本幻灯片组件。
这是一个基于Vue.js的内容切换组件。
这是一个基于Vue的图像墙组件。
这是一个灵活可扩展的内容容器组件。
这是ApexCharts的Vue.js组件。