vue-materialize

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
character-counter (input/textarea)
textarea resize
select
range & slider
file-input
tabs
date-picker

Install

npm install --save-dev vue-materialize
// webpack
npm install --save-dev webpack
// style loaders
npm install --save-dev style-loader css-loader sass-loader url-loader file-loader

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.

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/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/typography";
@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";
@import "~materialize-css/sass/components/forms/checkboxes";
@import "~materialize-css/sass/components/forms/radio-buttons";

// 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";
@import "~materialize-css/sass/components/forms/switches";
@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/select";
// @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 vue-icons callback-loader

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")
  "card-reveal": require("vue-materialize/card-reveal")
  "card-toggle": require("vue-materialize/card-toggle")
# or with bundle.js
  "card": window.vueMaterialize.card
  "card-reveal": window.vueMaterialize.cardReveal
  "card-toggle": window.vueMaterialize.cardToggle

<card>
  <card-toggle class="card-image">
    // some image
  </cards-toggle>
  <div class="card-content">
    <card-toggle class="card-title">The title</card-toggle>
    some short content
  </div>
  <card-reveal>
    <card-toggle class="card-title">The revealed title</card-toggle>
    The revealed content
  </card-reveal>
</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^}

Name	type	default	description
horizontal	Boolean	false	adds horizontal to class of `div`

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">
  <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

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

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

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

Props ^{top^}

Name	type	default	description
is-on	Boolean	false	(two-way) toggle state
disabled	Boolean	false	is disabled

Events ^{top^}

| Name | description | | ---:| --- | ---| --- | | off | will be emitted on click when state was on | | on | will be emitted on click when state was off | | toggle | will be emitted on click |

input-field ^{top^}

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

more info to come..

Files

README.md

Latest commit

History

README.md

File metadata and controls

vue-materialize

Demo

Features

What is missing:

Install

Import syntax

Table of contents

Style

Webpack config top^

configure SCSS top^

Icons top^

vue-icons

Usage

JS

card top^

collapsible top^

dropdown top^

fixed-action-button top^

Additional props top^

material-box top^

modal top^

parallax top^

pushpin top^

scrollfire top^

scrollspy top^

side-nav top^

toaster top^

tooltip top^

waves top^