vue-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:
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\??$/loader: "url-loader?limit=10000&mimetype=application/font-woff" test: /\.ttf\??$/loader: "file-loader" test: /\.eot\??$/loader: "file-loader" test: /\.svg\??$/loader: "file-loader" test: /\.scss$/loader: "style!css!sass?sourceMap"
top^
configure SCSScreate a file, for example materialize.config.scss
; ; // all colors: // @import "~materialize-css/sass/components/color"; // BEGIN: only specific colors ;// include colors you need ;// END: only specific colors ;;;; // 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 ;;; // icons are no long included in materializeCSS ;;;;; // css for js modules // activate only what you need ;;;;;; // scrollspy ;// ----- no js but need to be after input-fields ;;// ----- ;; // need to be after input-fields ;; // 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:
or
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:
add
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"
JS
top^
card## whithin your module components: "card": require"vue-materialize/card"# or with bundle.js "card": windowvueMaterializecard
<!-- remove sticky-action class for normal action --> Title (click me) Some Content Title (click me) <!-- required for reveal to work --> Significantly more Content Some sticky action
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": windowvueMaterializecollapsible "collapsible-item": windowvueMaterializecollapsibleItem
header1 body 1 header21 body 2
demo - source for demo - doc: vue-collapsible
top^
dropdown## whithin your module components: "dropdown": require"vue-materialize/dropdown"# or with bundle.js "dropdown": windowvueMaterializedropdown
Open Dropdown Content
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": windowvueMaterializefixedActionButton
hover 1 2
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": windowvueMaterializematerialBox
a caption
demo - source for demo - doc: vue-zoombox
top^
modal## whithin your module components: "modal": require"vue-materialize/modal"# or with bundle.js "modal": windowvueMaterializemodal
Open Modal Header Content close
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": windowvueMaterializeparallax
loading... content
demo - source for demo - doc: vue-parallax
top^
pushpincomponents: "pushpin": require"vue-materialize/pushpin"# or with bundle.js "pushpin": windowvueMaterializepushpin
some fixed text
demo - source for demo - doc: vue-pushpin
top^
scrollfire## whithin your module components: "scrollfire": require"vue-materialize/scrollfire"# or with bundle.js "scrollfire": windowvueMaterializescrollfire
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": windowvueMaterializescrollspy "scrollspy-item": windowvueMaterializescrollspyItem
description of target description of other target
demo - source for demo - doc: vue-comps-scrollspy
top^
side-nav# somewhere Vueuserequire'vue-touch' # in your component components: "side-nav": require"vue-materialize/side-nav"# or with bundle.js "side-nav": windowvueMaterializesideNav
First Text
demo - source for demo - doc: vue-side-nav
top^
toaster# somewhere Vueuserequire'vue-touch' # in your component mixins: require"vue-materialize/toaster" # or with bundle.js windowvueMaterializetoaster
# in the instance (text is mandatory) @toasttext:"I'm toast"classes:"toast""rounded"timeout:4000: -> #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": windowvueMaterializetooltip
Hover me! Some information
demo - source for demo - doc: vue-comps-tooltip
top^
waves# somewhere Vueuserequire'vue-touch' # in your component components: "waves": require"vue-materialize/waves"# or, when using bundle.js components: "waves": windowvueMaterializewaves
Click or touch me!
demo - source for demo - doc: vue-comps-waves
forms
top^
radioOneTwo
demo - source for demo - doc: radio
top^
checkboxOneTwo
demo - source for demo - doc: checkbox
top^
switchcomponents: "switch": require"vue-materialize/switch"# or with bundle.js "switch": windowvueMaterializeswitch
SomeOffLabel <!-- defaults to Off --> SomeOnLabel <!-- defaults to On -->
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": windowvueMaterializeinputField
<!-- optional --> <!-- no wrapping row for textarea -->
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": windowvueMaterializeselect "v-option": windowvueMaterializeselectOption
option 1/ option 2
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.