cerijs and ceri-materialize
DEPRECATED seevue-materialize
materializeCss styles for vue-comps.
Demo
Features
- No
jQuery
dependency Velocity.js
for animationsvue-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.
top^
Webpack configloaders: [
{ 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"}
]
top^
configure SCSScreate 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"
top^
IconsNo 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
top^
card## 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.
top^
collapsible## 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
top^
dropdown## 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
top^
fixed-action-button## 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
top^
Additional propsName | type | default | description |
---|---|---|---|
horizontal | Boolean | false | opens to the left |
other-side | Boolean | false | opens to the bottom (or right with horizontal) |
top^
material-box## 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
top^
modal## 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
top^
Additional propsName | type | default | description |
---|---|---|---|
bottom-sheet | Boolean | false | opens from the bottom (see demo ) |
top^
parallaxcomponents:
"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
top^
pushpincomponents:
"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
top^
scrollfire## 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
top^
scrollspy## 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
top^
side-nav# 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
top^
toaster# 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
top^
tooltip# 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
top^
waves# 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
top^
radio<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
top^
checkbox<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
top^
switchcomponents:
"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
top^
input-field## 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>
top^
PropsName | 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 |
top^
Eventsfocus
and blur
are pass-through
top^
Select## 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 to1.1.0
changelog
movedvue-icons
todevDependencies
pointing main tobuild/index.js
-
0.4.1
addedvue-simple-select
asselect
- this need a reordering of the scss (see SCSS) -
0.4.0
vue-zoombox
updated to1.0.0
changelog
vue-toaster
updated to1.0.0
changelog
vue-comps-scrollspy
updated to1.0.0
changelog
vue-pushpin
updated to1.0.0
changelog
vue-parallax
updated to1.0.0
changelog
vue-card
updated to1.1.0
changelog -
0.3.0
vue-collapsible
updated to1.0.1
changelog
vue-side-nav
updated to1.1.0
changelog
vue-fixed-action-button
updated to1.1.0
changelog
addedother-side
prop forvue-materialize/fixed-action-button
vue-comps-waves
updated to1.0.0
changelog
vue-icons
updated to1.4.1
changelog
vue-scrollfire
updated to1.0.0
changelog
vue-comps-tooltip
updated to1.0.0
changelog
vue-comps-modal
updated to1.1.1
changelog
vue-comps-dropdown
updated to1.2.1
changelog
License
Copyright (c) 2015 Paul Pflugradt Licensed under the MIT license.