DEPRECATED see cerijs and ceri-materialize

vue-materialize

materializeCss styles for vue-comps.

Demo

Features

• No jQuery dependency
• Velocity.js for animations
• vue-touch for touch compability
• Easy style modification
• Only load what you need (webpack code splitting)

What is missing:

• carousel
• range & slider
• file-input
• tabs
• date-picker

Install

npm install --save-dev vue-materialize
## When using with webpack (recommended)
# webpack
npm install --save-dev webpack
# style loaders
npm install --save-dev style-loader css-loader sass-loader url-loader file-loader vue-style-loader
# node-sass
npm install --save-dev node-sass

or include build/bundle.js (comes with npm install - 159kb - includes Velocity.js)

Import syntax

commonJS allows to require a single js file:

components:
  "fab": require("vue-materialize/fixed-action-button") # loads the fixed-action-button.js in the vue-materialize folder

This is not possible with the es6 import/export. You can still use it like this:

import {fixedActionButton} from "vue-materialize"
components: {
  "fab": fixedActionButton
}

However, webpack will add ALL components to your bundle this way.

Webpack 2 comes with tree-shaking to remove all unused components again. So if you really want to use the import syntax please migrate to webpack 2.

Table of contents

• Style
  • Webpack config
  • configure SCSS
• Icons
• JS
  • card
  • collapsible
  • dropdown
  • fixed-action-button
  • material-box
  • modal
  • parallax
  • pushpin
  • scrollfire
  • scrollspy
  • side-nav
  • toaster
  • tooltip
  • waves
• forms
  • radio
  • checkbox
  • switch
  • input-field
  • Select
• Changelog
• License

Style

For the usage of the css only components see the very good materialize-css documentation.

For style personalisation see the sass variable definitions in the original repo.

Webpack config ^{top^}

loaders: [
  { test: /\.woff(\d*)\??(\d*)$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }
  { test: /\.ttf\??(\d*)$/,    loader: "file-loader" }
  { test: /\.eot\??(\d*)$/,    loader: "file-loader" }
  { test: /\.svg\??(\d*)$/,    loader: "file-loader" }
  { test: /\.scss$/, loader: "style!css!sass?sourceMap"}
]

configure SCSS ^{top^}

create a file, for example materialize.config.scss

@charset "UTF-8";

@import "~materialize-css/sass/components/mixins";

// all colors:
// @import "~materialize-css/sass/components/color";

// BEGIN: only specific colors
@import "~vue-materialize/sass/color";
// include colors you need
@include do("include-color","black", "base");
@include do("include-color","white", "base");
@import "~vue-materialize/sass/colorProcessor";
// END: only specific colors

@import "~materialize-css/sass/components/variables";
@import "~materialize-css/sass/components/normalize";
@import "~materialize-css/sass/components/typography";
@import "~materialize-css/sass/components/global";

// modify variables here
// all available sass variables:
// https://github.com/Dogfalo/materialize/blob/master/sass/components/_variables.scss
// e.g. $dropdown-bg-color: black;

// css only, no JS needed for these
// activate only what you need
$roboto-font-path: "~materialize-css/fonts/roboto/";
@import "~materialize-css/sass/components/roboto";
@import "~materialize-css/sass/components/icons-material-design"; // icons are no long included in materializeCSS
@import "~materialize-css/sass/components/buttons";
@import "~materialize-css/sass/components/grid";
@import "~materialize-css/sass/components/navbar";
@import "~materialize-css/sass/components/preloader";
@import "~vue-materialize/sass/forms";

// css for js modules
// activate only what you need
@import "~materialize-css/sass/components/cards";
@import "~materialize-css/sass/components/sideNav";
@import "~materialize-css/sass/components/dropdown";
@import "~materialize-css/sass/components/modal";
@import "~materialize-css/sass/components/collapsible";
@import "~materialize-css/sass/components/table_of_contents"; // scrollspy
@import "~materialize-css/sass/components/forms/input-fields";
// ----- no js but need to be after input-fields
@import "~materialize-css/sass/components/forms/checkboxes";
@import "~materialize-css/sass/components/forms/radio-buttons";
// -----
@import "~materialize-css/sass/components/forms/switches";
@import "~materialize-css/sass/components/forms/select"; // need to be after input-fields
@import "~materialize-css/sass/components/toast";
@import "~materialize-css/sass/components/tooltip";

// NOT implemented yet:
// @import "~materialize-css/sass/components/tabs";
// @import "~materialize-css/sass/components/slider";
// @import "~materialize-css/sass/components/date_picker/default";
// @import "~materialize-css/sass/components/date_picker/default.date";
// @import "~materialize-css/sass/components/date_picker/default.time";
// @import "~materialize-css/sass/components/forms/file-input";
// @import "~materialize-css/sass/components/forms/range";

Require it like this:

require("./materialize.config.scss")
or
import "./materialize.config.scss"

Icons ^{top^}

No icons are included in the bundle.

You can either take the Google Material Design Icons as a font and use them the materializeCSS way:

<i class="material-icons">add</i>

or use vue-icons:

vue-icons

If you use webpack, you could use vue-icons, this will allow you to load only the icons you need. Additional dependencies:

npm install --save-dev callback-loader vue-icons@1

Additional webpack config:

module:
  postLoaders: [
    { test: /vue-icons/, loader: "callback-loader"}
  ]
callbackLoader:
  require("vue-icons/icon-loader")(["material-add"]) # add all the icons you need

Usage

components:
  "icon": require("vue-materialize/icon")

<icon name="material-add"></icon>

JS

card ^{top^}

## whithin your module
components:
  "card": require("vue-materialize/card")
# or with bundle.js
  "card": window.vueMaterialize.card

<card class="sticky-action"> <!-- remove sticky-action class for normal action -->
  <img slot="img" src="http://materializecss.com/images/office.jpg"></img>
  <span slot="title">Title (click me)</span>
  <p>Some Content</p>
  <span slot="revealTitle">Title (click me)</span> <!-- required for reveal to work -->
  <p slot="reveal">Significantly more Content</p>
  <a slot="action" href="#card">Some sticky action</a>
</card>

demo - source for demo - doc: vue-card

Of course you can also use the no-reveal materializeCSS cards.

collapsible ^{top^}

## whithin your module
components:
  "collapsible": require("vue-materialize/collapsible")
  "collapsible-item": require("vue-materialize/collapsible-item")
# or with bundle.js
  "collapsible": window.vueMaterialize.collapsible
  "collapsible-item": window.vueMaterialize.collapsibleItem

<collapsible>
  <collapsible-item>
    <h4 slot="header">header1</h4>
    <p>body 1</p>
  </collapsible-item>
  <collapsible-item>
    <h4 slot="header">header21</h4>
    <p>body 2</p>
  </collapsible-item>
</collapsible>

demo - source for demo - doc: vue-collapsible

dropdown ^{top^}

## whithin your module
components:
  "dropdown": require("vue-materialize/dropdown")
# or with bundle.js
  "dropdown": window.vueMaterialize.dropdown

<button> Open Dropdown
  <dropdown>
    <li>Content</li>
  </dropdown>
</button>

demo - source for demo - doc: vue-comps-dropdown

fixed-action-button ^{top^}

## whithin your module
components:
  "fab": require("vue-materialize/fixed-action-button")
# or with bundle.js
  "fab": window.vueMaterialize.fixedActionButton

<fab style="bottom:20px;right:20px">
  <a class="btn-floating btn-large" slot="fab">hover</button>
  <li><a class="btn-floating">1</a></li>
  <li><a class="btn-floating">2</a></li>
</fab>

demo - source for demo - doc: vue-fixed-action-button

Additional props ^{top^}

material-box ^{top^}

## whithin your module
components:
  "material-box": require("vue-materialize/material-box")
# or with bundle.js
  "material-box": window.vueMaterialize.materialBox

<material-box style="width:200px",src="some/image.jpg",thumb="some/thumb.jpg">
  <span slot="caption" style="color:white">a caption</span>
</material-box>

demo - source for demo - doc: vue-zoombox

modal ^{top^}

## whithin your module
components:
  "modal": require("vue-materialize/modal")
# or with bundle.js
  "modal": window.vueMaterialize.modal

<button> Open Modal
  <modal>
    <div class="modal-content">
      <h4>Header</h4>
      <p>Content</p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-flat">close</button>
    </div class="modal-footer">
  </modal>
</button>

demo - source for demo - doc: vue-comps-modal

Additional props ^{top^}

parallax ^{top^}

components:
  "parallax": require("vue-materialize/parallax")
# or with bundle.js
  "parallax": window.vueMaterialize.parallax

<parallax src="path/to/img">
  <div slot="loading">loading...</div>
  <div>content</div>
</parallax>

demo - source for demo - doc: vue-parallax

pushpin ^{top^}

components:
  "pushpin": require("vue-materialize/pushpin")
# or with bundle.js
  "pushpin": window.vueMaterialize.pushpin

<pushpin>
  <p>some fixed text</p>
</pushpin>

demo - source for demo - doc: vue-pushpin

scrollfire ^{top^}

## whithin your module
components:
  "scrollfire": require("vue-materialize/scrollfire")
# or with bundle.js
  "scrollfire": window.vueMaterialize.scrollfire

<scrollfire @entered="doSomething"></scrollfire>

demo - source for demo - doc: vue-scrollfire

scrollspy ^{top^}

## whithin your module
components:
  "scrollspy": require("vue-materialize/scrollspy")
  "scrollspy-item": require("vue-materialize/scrollspy-item")
# or with bundle.js
  "scrollspy": window.vueMaterialize.scrollspy
  "scrollspy-item": window.vueMaterialize.scrollspyItem

<scrollspy>
  <scrollspy-item target="idOfTarget">description of target</scrollspy-item>
  <scrollspy-item target="idOfOtherTarget">description of other target</scrollspy-item>
</scrollspy>

demo - source for demo - doc: vue-comps-scrollspy

side-nav ^{top^}

# somewhere
Vue.use(require('vue-touch'))

# in your component
components:
  "side-nav": require("vue-materialize/side-nav")
# or with bundle.js
  "side-nav": window.vueMaterialize.sideNav

<side-nav>
  <li><a>First Text</a></li>
</side-nav>

demo - source for demo - doc: vue-side-nav

toaster ^{top^}

# somewhere
Vue.use(require('vue-touch'))

# in your component
mixins:[
  require("vue-materialize/toaster")
  # or with bundle.js
  window.vueMaterialize.toaster
]

# in the instance (text is mandatory)
@toast(text:"I'm toast", classes:["toast","rounded"], timeout:4000, cb: ->)
  #do something on close

demo - source for demo - doc: vue-toaster

tooltip ^{top^}

# in your component
components:
  "tooltip": require("vue-materialize/tooltip")
# or, when using bundle.js
components:
  "tooltip": window.vueMaterialize.tooltip

<button>Hover me!
  <tooltip>Some information</tooltip>
</button>

demo - source for demo - doc: vue-comps-tooltip

waves ^{top^}

# somewhere
Vue.use(require('vue-touch'))

# in your component
components:
  "waves": require("vue-materialize/waves")
# or, when using bundle.js
components:
  "waves": window.vueMaterialize.waves

<button>Click or touch me!
  <waves></waves>
</button>

demo - source for demo - doc: vue-comps-waves

forms

radio ^{top^}

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked" class="with-gap">
<label for="two">Two</label>
<br>

demo - source for demo - doc: radio

checkbox ^{top^}

<input type="checkbox" id="one">
<label for="one">One</label>
<br>
<input type="checkbox" id="two" class="filled-in">
<label for="two">Two</label>
<br>

demo - source for demo - doc: checkbox

switch ^{top^}

components:
  "switch": require("vue-materialize/switch")
# or with bundle.js
  "switch": window.vueMaterialize.switch

<switch>
  <span slot="off">SomeOffLabel</span> <!-- defaults to Off -->
  <span slot="on">SomeOnLabel</span> <!-- defaults to On -->
</switch>

demo - source for demo - doc: vue-toggle

input-field ^{top^}

## whithin your module
components:
  "input-field": require("vue-materialize/input-field")
# or with bundle.js
  "input-field": window.vueMaterialize.inputField

<div class="row">
  <input-field class="s6" label="name"></input-field>
    <!-- optional -->
    <icon name="fa-user", slot="icon", class="prefix"></icon>
</div>
<!-- no wrapping row for textarea -->
<input-field class="s6" label="Some text" textarea></input-field>

demo - source for demo

Props ^{top^}

Events ^{top^}

focus and blur are pass-through

Select ^{top^}

## whithin your module
components:
  "v-select": require("vue-materialize/select")
  "v-option": require("vue-materialize/select-option")
# or with bundle.js
  "v-select": window.vueMaterialize.select
  "v-option": window.vueMaterialize.selectOption

<v-select :value="value" @input="onInput">
  <v-option value="1">option 1/<v-option>
  <v-option value="2">option 2</v-option>
</v-select>

demo - source for demo - doc: vue-simple-select

Changelog

• 1.0.0
  vue-toaster updated to 1.1.0 changelog
  moved vue-icons to devDependencies
  pointing main to build/index.js

• 0.4.1
  added vue-simple-select as select - this need a reordering of the scss (see SCSS)

• 0.4.0
  vue-zoombox updated to 1.0.0 changelog
  vue-toaster updated to 1.0.0 changelog
  vue-comps-scrollspy updated to 1.0.0 changelog
  vue-pushpin updated to 1.0.0 changelog
  vue-parallax updated to 1.0.0 changelog
  vue-card updated to 1.1.0 changelog

• 0.3.0
  vue-collapsible updated to 1.0.1 changelog
  vue-side-nav updated to 1.1.0 changelog
  vue-fixed-action-button updated to 1.1.0 changelog
  added other-side prop for vue-materialize/fixed-action-button
vue-comps-waves updated to 1.0.0 changelog
  vue-icons updated to 1.4.1 changelog
  vue-scrollfire updated to 1.0.0 changelog
  vue-comps-tooltip updated to 1.0.0 changelog
  vue-comps-modal updated to 1.1.1 changelog
  vue-comps-dropdown updated to 1.2.1 changelog

License

Copyright (c) 2015 Paul Pflugradt Licensed under the MIT license.