未来感のあるズーム可能なユーザーインターフェイス「zircle-ui」

zircle-uiとは

zircle-uiは、ズーム可能なユーザーインターフェイスを開発するためのフロントエンドライブラリです。

ズーム可能なUI / UXの円形UIキットで従来のUIから脱却することができます。

カスタマイズ可能なテーマとスタイルで、もちろんモバイルデバイスの大画面だとしても非常にうまく機能します。

環境

インストール

以下のnpm、yarn、CDNを使ってインストールします。

npm

npm install zircle

yarn

yarn add zircle

CDN

<script type="text/javascript" src="https://unpkg.com/zircle"></script>
<link href="https://unpkg.com/zircle/dist/zircle.css" rel="stylesheet">

gitリポジトリは以下から取得できます。

https://github.com/zircleUI/zircleUI

導入手順

1. ライブラリの取り込み

（1）webpack等の場合 [注意]モジュール版は未検証です。

import zircle from 'zircle'
import 'zircle/dist/zircle.css'

Vue.use(zircle)

（2）WEBページの場合

なし

2.メソッドを設定

このライブラリには大量のコンポーネントが必要です。
今回は6個のコンポーネントを用意しました。
実際のタグについては、次の項をご確認ください。

const foo = {
  template: '#foo'
}
const bar1 = { 
  template: '#bar1',    
};
const bar1bar1 = { 
  template: '#bar1bar1',    
};
const bar2 = { 
  template: '#bar2',    
};
const bar2bar1 = { 
  template: '#bar2bar1',    
};
const bar2bar2 = { 
  template: '#bar2bar2',    
};

let app = new Vue({
  el: '#app',
  components: {
    foo,
    bar1,
    bar1bar1,
    bar2,
    bar2bar1,
    bar2bar2
  },
  mounted () {
    this.$zircle.config({
      mode: 'mixed',
      style: {
        theme: 'white'
      }
    })
    this.$zircle.setView('foo')
  }
});

3. テンプレートを準備

<z-canvas> へサークル型のUIが実装されます。

各種コンポーネントを <z-view> あるいは  <z-spot> として階層的に取り込んでいきます。

[注意] サンプルはケバブケースで記載しています。

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

  <script type="text/x-template" id="foo">
    <z-view>Foo View
      <z-spot
        slot="extension"
        :angle="145"
        to-view="bar1">Bar1
      </z-spot>
      <z-spot
        slot="extension"
        :angle="45"
        to-view="bar2">Bar2
      </z-spot>
    </z-view>
  </script>
  <script type="text/x-template" id="bar1">
    <z-view>Bar1 View
      <z-spot
        slot="extension"
        :angle="0"
        to-view="bar1bar1">Bar1bar1
      </z-spot>
    </z-view>     
  </script>
  <script type="text/x-template" id="bar1bar1">
    <z-view>Bar1bar1 View</z-view> 
  </script>
  <script type="text/x-template" id="bar2">
    <z-view>Bar2 View
      <z-spot
        slot="extension"
        :angle="145"
        to-view="bar2bar1">Bar2bar1
      </z-spot>
      <z-spot
        slot="extension"
        :angle="15"
        to-view="bar2bar1">Bar2bar1
      </z-spot>
    </z-view>     
  </script>
  <script type="text/x-template" id="bar2bar1">
    <z-view>bar2bar1 View</z-view> 
  </script>
  <script type="text/x-template" id="bar2bar2">
    <z-view>bar2bar2 View</z-view>     
  </script>
</div>

サンプル

>>専用ページで確認する

さいごに

ズーム可能なユーザーインターフェイスを開発するためのフロントエンドライブラリでした。

今日はこの辺でー