Railsでvue-materialを試す.md

6455 ワード
Vue.js Rails Rails テキストリンク

前提

  • Rails5.1を想定
  • Webpackerをインストールしておく
  • vueをインストールしておく

インストール

  • vueでMaterial-UIを使うためのパッケージをインストール
    $ yarn add vue-material

  • Material-UIのアイコンをインストール
    $ yarn add material-design-icons

vue-material, material-design-icons のCSSをインポート

app/assets/stylesheets/application.css
/* vue-materialのCSSを読み込み */
@import 'vue-material/dist/vue-material.css';
/* material-iconsのCSSを読み込み */
@import 'material-design-icons/iconfont/material-icons.css';

ERBファイル

app/views/layouts/application.html.erb
  ...
  <body>
    <div id="app">
      <%# ヘッダー %>
      <md-toolbar>
        <md-button class="md-icon-button" @click="toggleLeftSidenav">
          <md-icon>menu</md-icon>
        </md-button>
        <h1 class="md-title">My App</h1>
      </md-toolbar>
      <%# サイドメニュー %>
      <md-sidenav class="md-left" ref="leftSidenav">
        <md-toolbar class="md-large">
          <div class="md-toolbar-container">
            <h3 class="md-title">Sidenav content</h3>
          </div>
        </md-toolbar>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate esse necessitatibus beatae nobis, deserunt ut est fugit, tempora deleniti, eligendi commodi doloribus. Nemo, assumenda possimus, impedit inventore perferendis iusto!</p>
      </md-sidenav>
    </div>
    <%= yield %>
    <%= javascript_pack_tag 'hello_vue.js' %>
  </body>

JavaScript

app/javascript/packs/hello_vue.js
import Vue from 'vue/dist/vue.esm'
import VueMaterial from 'vue-material'

Vue.use(VueMaterial)

document.addEventListener('DOMContentLoaded', () => {
  new Vue({
    el: '#app',
    methods: {
      toggleLeftSidenav(){
        this.$refs.leftSidenav.toggle();
      }
    }
  })
});

こんな感じで表示されたら成功

メニューボタンを押す前

押した後

参考URL

http://vuematerial.io/#/components/sidenav
http://google.github.io/material-design-icons/

[TIL]input,buttonラベルのtype
Combination Sum II