Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/paulpflug/vue-materialize

materialize - done in vue
https://github.com/paulpflug/vue-materialize
Last synced: 9 days ago
JSON representation
materialize - done in vue
Host: GitHub
URL: https://github.com/paulpflug/vue-materialize
Owner: paulpflug
Created: 2015-07-05T17:38:21.000Z (over 9 years ago)
Default Branch: master
Last Pushed: 2017-03-24T12:05:53.000Z (over 7 years ago)
Last Synced: 2024-10-16T07:32:28.692Z (20 days ago)
Language: CoffeeScript
Size: 1.58 MB
Stars: 170
Watchers: 14
Forks: 6
Open Issues: 6
Metadata Files:
- Readme: README.md
Awesome Lists containing this project

awesome-vue-cn - vue-materialize ★25 - comps` (Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) / Component Collections)
my-awesome - vue-materialize - materialize - done in vue (Vue)
README

        # DEPRECATED see [cerijs](https://github.com/cerijs) and [ceri-materialize](https://github.com/ceri-comps/ceri-materialize)

# vue-materialize

[materializeCss](http://materializecss.com/) styles for [vue-comps](https://github.com/vue-comps).

### [Demo](https://paulpflug.github.io/vue-materialize)

# Features

- No `jQuery` dependency

- `Velocity.js` for animations

- `vue-touch` for touch compability

- Easy style modification

- Only load what you need ([webpack code splitting](https://webpack.github.io/docs/code-splitting.html))

### What is missing:

- carousel

- range & slider

- file-input

- tabs

- date-picker

# Install

```sh

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:

```coffee

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:

```js

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](#style)

  * [Webpack config](#webpack-config-top)

  * [configure SCSS](#configure-scss-top)

- [Icons](#icons-top)

- [JS](#js)

  * [card](#card-top)

  * [collapsible](#collapsible-top)

  * [dropdown](#dropdown-top)

  * [fixed-action-button](#fixed-action-button-top)

  * [material-box](#material-box-top)

  * [modal](#modal-top)

  * [parallax](#parallax-top)

  * [pushpin](#pushpin-top)

  * [scrollfire](#scrollfire-top)

  * [scrollspy](#scrollspy-top)

  * [side-nav](#side-nav-top)

  * [toaster](#toaster-top)

  * [tooltip](#tooltip-top)

  * [waves](#waves-top)

- [forms](#forms)

  * [radio](#radio-top)

  * [checkbox](#checkbox-top)

  * [switch](#switch-top)

  * [input-field](#input-field-top)

  * [Select](#select-top)

- [Changelog](#changelog)

- [License](#license)

## Style

For the usage of the css only components see the very good [materialize-css documentation](http://materializecss.com/).

For style personalisation see the sass variable definitions in the original [repo](https://github.com/Dogfalo/materialize/blob/master/sass/components/_variables.scss).

### Webpack config ^{[top^](#table-of-contents)}

```coffee

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^](#table-of-contents)}

create a file, for example `materialize.config.scss`

```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:

```js

require("./materialize.config.scss")

or

import "./materialize.config.scss"

```

## Icons ^{[top^](#table-of-contents)}

No icons are included in the bundle.

You can either take the [Google Material Design Icons](https://design.google.com/icons/) as a font and use them the materializeCSS way:

```html

add

```

or use `vue-icons`:

#### vue-icons

If you use webpack, you could use [vue-icons](git://github.com/vue-comps/vue-icons), this will allow you to load only the icons you need.

Additional dependencies:

```sh

npm install --save-dev callback-loader vue-icons@1

```

Additional webpack config:

```coffee

module:

  postLoaders: [

    { test: /vue-icons/, loader: "callback-loader"}

  ]

callbackLoader:

  require("vue-icons/icon-loader")(["material-add"]) # add all the icons you need

```

##### Usage

```coffee

components:

  "icon": require("vue-materialize/icon")

```

```html

```

## JS

### card ^{[top^](#table-of-contents)}

```coffee

## whithin your module

components:

  "card": require("vue-materialize/card")

# or with bundle.js

  "card": window.vueMaterialize.card

```

```html

 

  

  Title (click me)

  
Some Content

  Title (click me) 

  Significantly more Content

  Some sticky action

```

[demo](https://paulpflug.github.io/vue-materialize/#!/card) - [source for demo](dev/card.vue) - [doc: vue-card](https://github.com/vue-comps/vue-card)

Of course you can also use the no-reveal [materializeCSS cards](http://materializecss.com/cards.html).

### collapsible ^{[top^](#table-of-contents)}

```coffee

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

```

```html

  

    
header1

    body 1

  

  

    header21

    body 2

  

```

[demo](https://paulpflug.github.io/vue-materialize/#!/collapsible) - [source for demo](dev/collapsible.vue) - [doc: vue-collapsible](https://github.com/vue-comps/vue-collapsible)

### dropdown ^{[top^](#table-of-contents)}

```coffee

## whithin your module

components:

  "dropdown": require("vue-materialize/dropdown")

# or with bundle.js

  "dropdown": window.vueMaterialize.dropdown

```

```html

 Open Dropdown

  

    
Content

  

```

[demo](https://paulpflug.github.io/vue-materialize/#!/dropdown) - [source for demo](dev/dropdown.vue) - [doc: vue-comps-dropdown](https://github.com/vue-comps/vue-comps-dropdown)

### fixed-action-button ^{[top^](#table-of-contents)}

```coffee

## whithin your module

components:

  "fab": require("vue-materialize/fixed-action-button")

# or with bundle.js

  "fab": window.vueMaterialize.fixedActionButton

```

```html

  hover

  
1

  2



```

[demo](https://paulpflug.github.io/vue-materialize/#!/fixed-action-button) - [source for demo](dev/fixed-action-button.vue) - [doc: vue-fixed-action-button](https://github.com/vue-comps/vue-fixed-action-button)

#### Additional props ^{[top^](#table-of-contents)}

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^](#table-of-contents)}

```coffee

## whithin your module

components:

  "material-box": require("vue-materialize/material-box")

# or with bundle.js

  "material-box": window.vueMaterialize.materialBox

```

```html

  a caption

```

[demo](https://paulpflug.github.io/vue-materialize/#!/material-box) - [source for demo](dev/material-box.vue) - [doc: vue-zoombox](https://github.com/vue-comps/vue-zoombox)

### modal ^{[top^](#table-of-contents)}

```coffee

## whithin your module

components:

  "modal": require("vue-materialize/modal")

# or with bundle.js

  "modal": window.vueMaterialize.modal

```

```html

 Open Modal

  

    


      Header

      Content

    

    

      close

    

  

```

[demo](https://paulpflug.github.io/vue-materialize/#!/modal) - [source for demo](dev/modal.vue) - [doc: vue-comps-modal](https://github.com/vue-comps/vue-comps-modal)

#### Additional props ^{[top^](#table-of-contents)}

Name | type | default | description

---:| --- | ---| ---

bottom-sheet | Boolean | false | opens from the bottom (see [demo](https://paulpflug.github.io/vue-materialize/#!/modal) )

### parallax ^{[top^](#table-of-contents)}

```coffee

components:

  "parallax": require("vue-materialize/parallax")

# or with bundle.js

  "parallax": window.vueMaterialize.parallax

```

```html

  
loading...

  content


```

[demo](https://paulpflug.github.io/vue-materialize/#!/parallax) - [source for demo](dev/parallax.vue) - [doc: vue-parallax](https://github.com/vue-comps/vue-parallax)

### pushpin ^{[top^](#table-of-contents)}

```coffee

components:

  "pushpin": require("vue-materialize/pushpin")

# or with bundle.js

  "pushpin": window.vueMaterialize.pushpin

```

```html

  
some fixed text


```

[demo](https://paulpflug.github.io/vue-materialize/#!/pushpin) - [source for demo](dev/pushpin.vue) - [doc: vue-pushpin](https://github.com/vue-comps/vue-pushpin)

### scrollfire ^{[top^](#table-of-contents)}

```coffee

## whithin your module

components:

  "scrollfire": require("vue-materialize/scrollfire")

# or with bundle.js

  "scrollfire": window.vueMaterialize.scrollfire

```

```html

```

[demo](https://paulpflug.github.io/vue-materialize/#!/scrollfire) - [source for demo](dev/scrollfire.vue) - [doc: vue-scrollfire](https://github.com/vue-comps/vue-scrollfire)

### scrollspy ^{[top^](#table-of-contents)}

```coffee

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

```

```html

  description of target

  description of other target

```

[demo](https://paulpflug.github.io/vue-materialize/#!/scrollspy) - [source for demo](dev/scrollspy.vue) - [doc: vue-comps-scrollspy](https://github.com/vue-comps/vue-comps-scrollspy)

### side-nav ^{[top^](#table-of-contents)}

```coffee

# 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

```

```html

  
First Text


```

[demo](https://paulpflug.github.io/vue-materialize/#!/side-nav) - [source for demo](dev/side-nav.vue) - [doc: vue-side-nav](https://github.com/vue-comps/vue-side-nav)

### toaster ^{[top^](#table-of-contents)}

```coffee

# somewhere

Vue.use(require('vue-touch'))

# in your component

mixins:[

  require("vue-materialize/toaster")

  # or with bundle.js

  window.vueMaterialize.toaster

]

```

```coffee

# in the instance (text is mandatory)

@toast(text:"I'm toast", classes:["toast","rounded"], timeout:4000, cb: ->)

  #do something on close

```

[demo](https://paulpflug.github.io/vue-materialize/#!/toaster) - [source for demo](dev/toaster.vue) - [doc: vue-toaster](https://github.com/vue-comps/vue-toaster)

### tooltip ^{[top^](#table-of-contents)}

```coffee

# in your component

components:

  "tooltip": require("vue-materialize/tooltip")

# or, when using bundle.js

components:

  "tooltip": window.vueMaterialize.tooltip

```

```html

Hover me!

  Some information

```

[demo](https://paulpflug.github.io/vue-materialize/#!/tooltip) - [source for demo](dev/tooltip.vue) - [doc: vue-comps-tooltip](https://github.com/vue-comps/vue-comps-tooltip)

### waves ^{[top^](#table-of-contents)}

```coffee

# 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

```

```html

Click or touch me!

  

```

[demo](https://paulpflug.github.io/vue-materialize/#!/waves) - [source for demo](dev/waves.vue) - [doc: vue-comps-waves](https://github.com/vue-comps/vue-comps-waves)

## forms

### radio ^{[top^](#table-of-contents)}

```html

One




Two




```

[demo](https://paulpflug.github.io/vue-materialize/#!/forms/radio) - [source for demo](dev/forms/radio.vue) - [doc: radio](http://vuejs.org/guide/forms.html#Radio)

### checkbox ^{[top^](#table-of-contents)}

```html

One




Two




```

[demo](https://paulpflug.github.io/vue-materialize/#!/forms/checkbox) - [source for demo](dev/forms/checkbox.vue) - [doc: checkbox](http://vuejs.org/guide/forms.html#Checkbox)

### switch ^{[top^](#table-of-contents)}

```coffee

components:

  "switch": require("vue-materialize/switch")

# or with bundle.js

  "switch": window.vueMaterialize.switch

```

```html

  SomeOffLabel 

  SomeOnLabel 

```

[demo](https://paulpflug.github.io/vue-materialize/#!/forms/switch) - [source for demo](dev/forms/switch.vue) - [doc: vue-toggle](https://github.com/vue-comps/vue-toggle)

### input-field ^{[top^](#table-of-contents)}

```coffee

## whithin your module

components:

  "input-field": require("vue-materialize/input-field")

# or with bundle.js

  "input-field": window.vueMaterialize.inputField

```

```html



  

    

    



```

[demo](https://paulpflug.github.io/vue-materialize/#!/forms/input-field) - [source for demo](dev/forms/input-field.vue)

#### Props ^{[top^](#table-of-contents)}

Name | type | default | description

---:| --- | ---| ---

autofocus | Boolean | false | autofocus

disabled | Boolean | false | disabled

readonly | Boolean | false | readonly

textarea | Boolean | false | use `` instead of ``

type | String | - | type for ``

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^](#table-of-contents)}

`focus` and `blur` are pass-through

### Select ^{[top^](#table-of-contents)}

```coffee

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

```

```html

  option 1/

  option 2

```

[demo](https://paulpflug.github.io/vue-materialize/#!/forms/select) - [source for demo](dev/forms/select.vue) - [doc: vue-simple-select](https://github.com/vue-comps/vue-simple-select)

## Changelog

- 1.0.0  

`vue-toaster` updated to `1.1.0`   [changelog](https://github.com/vue-comps/vue-toaster#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](https://github.com/paulpflug/vue-materialize#configure-scss-top))  

- 0.4.0  

`vue-zoombox` updated to `1.0.0` [changelog](https://github.com/vue-comps/vue-zoombox#changelog)  

`vue-toaster` updated to `1.0.0` [changelog](https://github.com/vue-comps/vue-toaster#changelog)  

`vue-comps-scrollspy` updated to `1.0.0` [changelog](https://github.com/vue-comps/vue-comps-scrollspy#changelog)  

`vue-pushpin` updated to `1.0.0` [changelog](https://github.com/vue-comps/vue-pushpin#changelog)  

`vue-parallax` updated to `1.0.0` [changelog](https://github.com/vue-comps/vue-parallax#changelog)  

`vue-card` updated to `1.1.0` [changelog](https://github.com/vue-comps/vue-card#changelog)  

- 0.3.0  

`vue-collapsible` updated to `1.0.1` [changelog](https://github.com/vue-comps/vue-collapsible#changelog)  

`vue-side-nav` updated to `1.1.0` [changelog](https://github.com/vue-comps/vue-side-nav#changelog)  

`vue-fixed-action-button` updated to `1.1.0` [changelog](https://github.com/vue-comps/vue-fixed-action-button#changelog)  

added `other-side` prop for `vue-materialize/fixed-action-button`  

`vue-comps-waves` updated to `1.0.0` [changelog](https://github.com/vue-comps/vue-comps-waves#changelog)  

`vue-icons` updated to `1.4.1` [changelog](https://github.com/vue-comps/vue-icons#changelog)  

`vue-scrollfire` updated to `1.0.0` [changelog](https://github.com/vue-comps/vue-comps-scrollfire#changelog)  

`vue-comps-tooltip` updated to `1.0.0` [changelog](https://github.com/vue-comps/vue-comps-tooltip#changelog)  

`vue-comps-modal` updated to `1.1.1` [changelog](https://github.com/vue-comps/vue-comps-modal#changelog)  

`vue-comps-dropdown` updated to `1.2.1` [changelog](https://github.com/vue-comps/vue-comps-dropdown#changelog)  

## License

Copyright (c) 2015 Paul Pflugradt

Licensed under the MIT license.