Vuesaxのサイドバーを使う

Posted on One min read

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

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

1
2

npm install vuesax
npm install material-icons

導入

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

index.html にlinkする。

1

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

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

1
2
3
4

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
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<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 で含められる。

1
2
3
4
5
6
7
8
9

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

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

1
2
3
4
5
6
7

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