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

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

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^}

Name	type	default	description
horizontal	Boolean	false	opens to the left
other-side	Boolean	false	opens to the bottom (or right with horizontal)

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^}

Name	type	default	description
bottom-sheet	Boolean	false	opens from the bottom (see demo )

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^}

Name	type	default	description
autofocus	Boolean	false	autofocus
disabled	Boolean	false	disabled
readonly	Boolean	false	readonly
textarea	Boolean	false	use `<textarea>` instead of `<input>`
type	String	-	type for `<input>`
validate	Function	-	use for validating input, argument will be the current value
dataError	String	-	message to display on invalid input. Used with validate
dataSuccess	String	-	message to display on valid input. Used with validate
label	String	-	description of the input
value	String	-	preset the value
placeholder	String	-	sets a placeholder
length	Number	0	maximum length of input

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

vue-materialize

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^

Additional props top^

parallax top^

pushpin top^

scrollfire top^

scrollspy top^

side-nav top^

toaster top^

tooltip top^

waves top^

forms

radio top^

checkbox top^

switch top^

input-field top^

Props top^

Events top^

Select top^

Changelog

License

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Last publish

Collaborators

Webpack config ^{top^}

configure SCSS ^{top^}

Icons ^{top^}

card ^{top^}

collapsible ^{top^}

dropdown ^{top^}

fixed-action-button ^{top^}

Additional props ^{top^}

material-box ^{top^}

modal ^{top^}

Additional props ^{top^}

parallax ^{top^}

pushpin ^{top^}

scrollfire ^{top^}

scrollspy ^{top^}

side-nav ^{top^}

toaster ^{top^}

tooltip ^{top^}

waves ^{top^}

radio ^{top^}

checkbox ^{top^}

switch ^{top^}

input-field ^{top^}

Props ^{top^}

Events ^{top^}

Select ^{top^}

Weekly Downloads