Vuesaxのサイドバーを使う

Vue.jsを使うときに、それでもデザインは辛いのでVuesaxを使ってみた。

material-icons に依存しているけど解決されないみたいなので自分で入れる。 material desingを利用できる。

12
npm install vuesax
npm install material-icons

導入

またデザインを活かすには vuesax.csslink する必要がある。 なので ./material-icons/iconfont/material-icons.cssimport も合わせて下のようにする。

index.html にlinkする。

1
<link href="https://cdn.jsdelivr.net/npm/vuesax/dist/vuesax.css" rel="stylesheet">

また main.js で下のように importVue.use() で有効にする。

1234
import 'material-icons/iconfont/material-icons.css'
import Vuesax from 'vuesax'

Vue.use(Vuesax)

利用例(sidebar)

sidebarを使ったコンポーネントを Sidebar.vue ファイルに定義した。

 1 2 3 4 5 6 7 8 91011121314151617181920212223242526272829303132
<template>
  <div>
    <vs-sidebar :vs-reduce-expand="!reducex" vs-static="True">
      <vs-sidebar-item v-for="item in sidebar_items"
                       v-bind:key="item.id"
                       v-bind:vs-icon="item.icon"
                       v-bind:vs-active="$route.path === item.to"
                       v-bind:to="item.to"
                       v-on:click="itemClick(item)">
        {{ item.title }}
      </vs-sidebar-item>
    </vs-sidebar>
  </div>
</template>
<script>
import './material-icons/iconfont/material-icons.css'

export default {
  name: 'Sidebar',
  data: () => ({
    sidebar_items: [
      {id: 0, title: 'Dashboard', icon: 'dashboard', to: '/'}
    ],
    itemClick: function (item) {
      switch (item.id) {
        case 2:
          alert('Hell')
      }
    }
  })
}
</script>

そして下のように利用した。 ここでは Vue.component() で定義したコンポーネントにグローバルな名前を与えて利用できるようにしてる。 他のコンポーネントを定義するときに components で含められる。

123456789
<template>
  <sidebar/>
</template>
<script>
import Vue from 'vue'
import Sidebar from '@/components/Sidebar'
  
Vue.compoent('sidebar', Sidebar)
</script>

ローカルな登録方法では下のようにする。

1234567
import Sidebar from '@/components/Sidebar'
export default {
  name: 'App',
  components: {
    sidebar: Sidebar
  }
}
comments powered by Disqus