Skip to content

paulpflug/vue-materialize

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DEPRECATED see cerijs and ceri-materialize

vue-materialize

materializeCss styles for vue-comps.

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

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^

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

License

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