├── .gitignore ├── .npmignore ├── README.md ├── build ├── generateToc.coffee ├── index.coffee ├── index.js ├── materialize.config.scss └── webpack.config.coffee ├── dev ├── babel-import.vue ├── card.vue ├── collapsible.vue ├── dropdown.vue ├── fixed-action-button.vue ├── forms │ ├── checkbox.vue │ ├── input-field.vue │ ├── radio.vue │ ├── select.vue │ └── switch.vue ├── icon.vue ├── material-box.vue ├── materialize.config.scss ├── modal.vue ├── parallax.vue ├── pushpin.vue ├── scrollfire.vue ├── scrollspy.vue ├── side-nav.vue ├── toaster.vue ├── tooltip.vue ├── waves.vue └── webpack.config.coffee ├── fonts └── roboto │ ├── Roboto-Bold.ttf │ ├── Roboto-Bold.woff │ ├── Roboto-Bold.woff2 │ ├── Roboto-Light.ttf │ ├── Roboto-Light.woff │ ├── Roboto-Light.woff2 │ ├── Roboto-Medium.ttf │ ├── Roboto-Medium.woff │ ├── Roboto-Medium.woff2 │ ├── Roboto-Regular.ttf │ ├── Roboto-Regular.woff │ ├── Roboto-Regular.woff2 │ ├── Roboto-Thin.ttf │ ├── Roboto-Thin.woff │ └── Roboto-Thin.woff2 ├── karma.conf.coffee ├── package.json ├── sass ├── _color.scss ├── _colorProcessor.scss └── _forms.scss ├── src ├── card.coffee ├── collapsible-item.coffee ├── collapsible.coffee ├── dropdown.coffee ├── fixed-action-button.coffee ├── icon.coffee ├── input-field.vue ├── material-box.coffee ├── modal.coffee ├── overlay.coffee ├── parallax.coffee ├── pushpin.coffee ├── scrollfire.coffee ├── scrollspy-item.coffee ├── scrollspy.coffee ├── select-option.coffee ├── select.coffee ├── side-nav.coffee ├── switch.coffee ├── toast.vue ├── toaster.coffee ├── tooltip.coffee └── waves.coffee └── test ├── card.coffee ├── collapsible.coffee ├── dropdown.coffee ├── fixed-action-button.coffee ├── input-field.coffee ├── material-box.coffee ├── modal.coffee ├── parallax.coffee ├── pushpin.coffee ├── scrollfire.coffee ├── scrollspy.coffee ├── side-nav.coffee ├── switch.coffee ├── toaster.coffee ├── tooltip.coffee └── waves.coffee /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.sublime-project 3 | *.sublime-workspace 4 | npm-debug.log 5 | static 6 | *.js 7 | !build/index.js 8 | .vscode 9 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.sublime-project 3 | *.sublime-workspace 4 | npm-debug.log 5 | static 6 | dev/index.js 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # DEPRECATED see [cerijs](https://github.com/cerijs) and [ceri-materialize](https://github.com/ceri-comps/ceri-materialize) 2 | 3 | # vue-materialize 4 | 5 | [materializeCss](http://materializecss.com/) styles for [vue-comps](https://github.com/vue-comps). 6 | 7 | ### [Demo](https://paulpflug.github.io/vue-materialize) 8 | 9 | # Features 10 | 11 | - No `jQuery` dependency 12 | - `Velocity.js` for animations 13 | - `vue-touch` for touch compability 14 | - Easy style modification 15 | - Only load what you need ([webpack code splitting](https://webpack.github.io/docs/code-splitting.html)) 16 | 17 | ### What is missing: 18 | 19 | - carousel 20 | - range & slider 21 | - file-input 22 | - tabs 23 | - date-picker 24 | 25 | # Install 26 | 27 | ```sh 28 | npm install --save-dev vue-materialize 29 | ## When using with webpack (recommended) 30 | # webpack 31 | npm install --save-dev webpack 32 | # style loaders 33 | npm install --save-dev style-loader css-loader sass-loader url-loader file-loader vue-style-loader 34 | # node-sass 35 | npm install --save-dev node-sass 36 | ``` 37 | or include `build/bundle.js` (comes with npm install - 159kb - includes `Velocity.js`) 38 | 39 | 40 | ### Import syntax 41 | commonJS allows to require a single js file: 42 | ```coffee 43 | components: 44 | "fab": require("vue-materialize/fixed-action-button") # loads the fixed-action-button.js in the vue-materialize folder 45 | ``` 46 | 47 | This is not possible with the es6 import/export. 48 | You can still use it like this: 49 | ```js 50 | import {fixedActionButton} from "vue-materialize" 51 | components: { 52 | "fab": fixedActionButton 53 | } 54 | ``` 55 | However, webpack will add ALL components to your bundle this way. 56 | 57 | Webpack 2 comes with tree-shaking to remove all unused components again. 58 | So if you really want to use the import syntax please migrate to webpack 2. 59 | 60 | # Table of contents 61 | 62 | 63 | 64 | - [Style](#style) 65 | * [Webpack config](#webpack-config-top) 66 | * [configure SCSS](#configure-scss-top) 67 | - [Icons](#icons-top) 68 | - [JS](#js) 69 | * [card](#card-top) 70 | * [collapsible](#collapsible-top) 71 | * [dropdown](#dropdown-top) 72 | * [fixed-action-button](#fixed-action-button-top) 73 | * [material-box](#material-box-top) 74 | * [modal](#modal-top) 75 | * [parallax](#parallax-top) 76 | * [pushpin](#pushpin-top) 77 | * [scrollfire](#scrollfire-top) 78 | * [scrollspy](#scrollspy-top) 79 | * [side-nav](#side-nav-top) 80 | * [toaster](#toaster-top) 81 | * [tooltip](#tooltip-top) 82 | * [waves](#waves-top) 83 | - [forms](#forms) 84 | * [radio](#radio-top) 85 | * [checkbox](#checkbox-top) 86 | * [switch](#switch-top) 87 | * [input-field](#input-field-top) 88 | * [Select](#select-top) 89 | - [Changelog](#changelog) 90 | - [License](#license) 91 | 92 | 93 | 94 | ## Style 95 | 96 | For the usage of the css only components see the very good [materialize-css documentation](http://materializecss.com/). 97 | 98 | For style personalisation see the sass variable definitions in the original [repo](https://github.com/Dogfalo/materialize/blob/master/sass/components/_variables.scss). 99 | 100 | 101 | 102 | ### Webpack config [top^](#table-of-contents) 103 | ```coffee 104 | loaders: [ 105 | { test: /\.woff(\d*)\??(\d*)$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" } 106 | { test: /\.ttf\??(\d*)$/, loader: "file-loader" } 107 | { test: /\.eot\??(\d*)$/, loader: "file-loader" } 108 | { test: /\.svg\??(\d*)$/, loader: "file-loader" } 109 | { test: /\.scss$/, loader: "style!css!sass?sourceMap"} 110 | ] 111 | ``` 112 | ### configure SCSS [top^](#table-of-contents) 113 | create a file, for example `materialize.config.scss` 114 | ```scss 115 | @charset "UTF-8"; 116 | 117 | @import "~materialize-css/sass/components/mixins"; 118 | 119 | // all colors: 120 | // @import "~materialize-css/sass/components/color"; 121 | 122 | // BEGIN: only specific colors 123 | @import "~vue-materialize/sass/color"; 124 | // include colors you need 125 | @include do("include-color","black", "base"); 126 | @include do("include-color","white", "base"); 127 | @import "~vue-materialize/sass/colorProcessor"; 128 | // END: only specific colors 129 | 130 | @import "~materialize-css/sass/components/variables"; 131 | @import "~materialize-css/sass/components/normalize"; 132 | @import "~materialize-css/sass/components/typography"; 133 | @import "~materialize-css/sass/components/global"; 134 | 135 | // modify variables here 136 | // all available sass variables: 137 | // https://github.com/Dogfalo/materialize/blob/master/sass/components/_variables.scss 138 | // e.g. $dropdown-bg-color: black; 139 | 140 | // css only, no JS needed for these 141 | // activate only what you need 142 | $roboto-font-path: "~materialize-css/fonts/roboto/"; 143 | @import "~materialize-css/sass/components/roboto"; 144 | @import "~materialize-css/sass/components/icons-material-design"; // icons are no long included in materializeCSS 145 | @import "~materialize-css/sass/components/buttons"; 146 | @import "~materialize-css/sass/components/grid"; 147 | @import "~materialize-css/sass/components/navbar"; 148 | @import "~materialize-css/sass/components/preloader"; 149 | @import "~vue-materialize/sass/forms"; 150 | 151 | // css for js modules 152 | // activate only what you need 153 | @import "~materialize-css/sass/components/cards"; 154 | @import "~materialize-css/sass/components/sideNav"; 155 | @import "~materialize-css/sass/components/dropdown"; 156 | @import "~materialize-css/sass/components/modal"; 157 | @import "~materialize-css/sass/components/collapsible"; 158 | @import "~materialize-css/sass/components/table_of_contents"; // scrollspy 159 | @import "~materialize-css/sass/components/forms/input-fields"; 160 | // ----- no js but need to be after input-fields 161 | @import "~materialize-css/sass/components/forms/checkboxes"; 162 | @import "~materialize-css/sass/components/forms/radio-buttons"; 163 | // ----- 164 | @import "~materialize-css/sass/components/forms/switches"; 165 | @import "~materialize-css/sass/components/forms/select"; // need to be after input-fields 166 | @import "~materialize-css/sass/components/toast"; 167 | @import "~materialize-css/sass/components/tooltip"; 168 | 169 | // NOT implemented yet: 170 | // @import "~materialize-css/sass/components/tabs"; 171 | // @import "~materialize-css/sass/components/slider"; 172 | // @import "~materialize-css/sass/components/date_picker/default"; 173 | // @import "~materialize-css/sass/components/date_picker/default.date"; 174 | // @import "~materialize-css/sass/components/date_picker/default.time"; 175 | // @import "~materialize-css/sass/components/forms/file-input"; 176 | // @import "~materialize-css/sass/components/forms/range"; 177 | ``` 178 | 179 | Require it like this: 180 | ```js 181 | require("./materialize.config.scss") 182 | or 183 | import "./materialize.config.scss" 184 | ``` 185 | 186 | ## Icons [top^](#table-of-contents) 187 | 188 | No icons are included in the bundle. 189 | 190 | You can either take the [Google Material Design Icons](https://design.google.com/icons/) as a font and use them the materializeCSS way: 191 | ```html 192 | add 193 | ``` 194 | or use `vue-icons`: 195 | 196 | #### vue-icons 197 | 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. 198 | Additional dependencies: 199 | ```sh 200 | npm install --save-dev callback-loader vue-icons@1 201 | ``` 202 | Additional webpack config: 203 | ```coffee 204 | module: 205 | postLoaders: [ 206 | { test: /vue-icons/, loader: "callback-loader"} 207 | ] 208 | callbackLoader: 209 | require("vue-icons/icon-loader")(["material-add"]) # add all the icons you need 210 | ``` 211 | ##### Usage 212 | ```coffee 213 | components: 214 | "icon": require("vue-materialize/icon") 215 | ``` 216 | ```html 217 | 218 | ``` 219 | 220 | 221 | ## JS 222 | ### card [top^](#table-of-contents) 223 | ```coffee 224 | ## whithin your module 225 | components: 226 | "card": require("vue-materialize/card") 227 | # or with bundle.js 228 | "card": window.vueMaterialize.card 229 | ``` 230 | ```html 231 | 232 | 233 | Title (click me) 234 |

Some Content

235 | Title (click me) 236 |

Significantly more Content

237 | Some sticky action 238 | 239 | ``` 240 | [demo](https://paulpflug.github.io/vue-materialize/#!/card) - [source for demo](dev/card.vue) - [doc: vue-card](https://github.com/vue-comps/vue-card) 241 | 242 | Of course you can also use the no-reveal [materializeCSS cards](http://materializecss.com/cards.html). 243 | 244 | ### collapsible [top^](#table-of-contents) 245 | ```coffee 246 | ## whithin your module 247 | components: 248 | "collapsible": require("vue-materialize/collapsible") 249 | "collapsible-item": require("vue-materialize/collapsible-item") 250 | # or with bundle.js 251 | "collapsible": window.vueMaterialize.collapsible 252 | "collapsible-item": window.vueMaterialize.collapsibleItem 253 | ``` 254 | ```html 255 | 256 | 257 |

header1

258 |

body 1

259 | 260 | 261 |

header21

262 |

body 2

263 | 264 | 265 | ``` 266 | [demo](https://paulpflug.github.io/vue-materialize/#!/collapsible) - [source for demo](dev/collapsible.vue) - [doc: vue-collapsible](https://github.com/vue-comps/vue-collapsible) 267 | 268 | ### dropdown [top^](#table-of-contents) 269 | ```coffee 270 | ## whithin your module 271 | components: 272 | "dropdown": require("vue-materialize/dropdown") 273 | # or with bundle.js 274 | "dropdown": window.vueMaterialize.dropdown 275 | ``` 276 | ```html 277 | 282 | ``` 283 | [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) 284 | 285 | ### fixed-action-button [top^](#table-of-contents) 286 | ```coffee 287 | ## whithin your module 288 | components: 289 | "fab": require("vue-materialize/fixed-action-button") 290 | # or with bundle.js 291 | "fab": window.vueMaterialize.fixedActionButton 292 | ``` 293 | ```html 294 | 295 | hover 296 |
  • 1
    • 297 |
  • 2
    • 298 |     299 | ``` 300 | [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) 301 | #### Additional props [top^](#table-of-contents) 302 | Name | type | default | description 303 | ---:| --- | ---| --- 304 | horizontal | Boolean | false | opens to the left 305 | other-side | Boolean | false | opens to the bottom (or right with horizontal) 306 | 307 | ### material-box [top^](#table-of-contents) 308 | ```coffee 309 | ## whithin your module 310 | components: 311 | "material-box": require("vue-materialize/material-box") 312 | # or with bundle.js 313 | "material-box": window.vueMaterialize.materialBox 314 | ``` 315 | ```html 316 | 317 | a caption 318 | 319 | ``` 320 | [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) 321 | 322 | ### modal [top^](#table-of-contents) 323 | ```coffee 324 | ## whithin your module 325 | components: 326 | "modal": require("vue-materialize/modal") 327 | # or with bundle.js 328 | "modal": window.vueMaterialize.modal 329 | ``` 330 | ```html 331 | 339 | 340 | 341 | 342 | ``` 343 | [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) 344 | #### Additional props [top^](#table-of-contents) 345 | Name | type | default | description 346 | ---:| --- | ---| --- 347 | bottom-sheet | Boolean | false | opens from the bottom (see [demo](https://paulpflug.github.io/vue-materialize/#!/modal) ) 348 | 349 | ### parallax [top^](#table-of-contents) 350 | ```coffee 351 | components: 352 | "parallax": require("vue-materialize/parallax") 353 | # or with bundle.js 354 | "parallax": window.vueMaterialize.parallax 355 | ``` 356 | ```html 357 | 358 |
    loading...
    359 |
    content
    360 |     361 | ``` 362 | [demo](https://paulpflug.github.io/vue-materialize/#!/parallax) - [source for demo](dev/parallax.vue) - [doc: vue-parallax](https://github.com/vue-comps/vue-parallax) 363 | 364 | ### pushpin [top^](#table-of-contents) 365 | ```coffee 366 | components: 367 | "pushpin": require("vue-materialize/pushpin") 368 | # or with bundle.js 369 | "pushpin": window.vueMaterialize.pushpin 370 | ``` 371 | ```html 372 | 373 |

    some fixed text

    374 |     375 | ``` 376 | [demo](https://paulpflug.github.io/vue-materialize/#!/pushpin) - [source for demo](dev/pushpin.vue) - [doc: vue-pushpin](https://github.com/vue-comps/vue-pushpin) 377 | 378 | ### scrollfire [top^](#table-of-contents) 379 | ```coffee 380 | ## whithin your module 381 | components: 382 | "scrollfire": require("vue-materialize/scrollfire") 383 | # or with bundle.js 384 | "scrollfire": window.vueMaterialize.scrollfire 385 | ``` 386 | ```html 387 | 388 | ``` 389 | [demo](https://paulpflug.github.io/vue-materialize/#!/scrollfire) - [source for demo](dev/scrollfire.vue) - [doc: vue-scrollfire](https://github.com/vue-comps/vue-scrollfire) 390 | 391 | ### scrollspy [top^](#table-of-contents) 392 | ```coffee 393 | ## whithin your module 394 | components: 395 | "scrollspy": require("vue-materialize/scrollspy") 396 | "scrollspy-item": require("vue-materialize/scrollspy-item") 397 | # or with bundle.js 398 | "scrollspy": window.vueMaterialize.scrollspy 399 | "scrollspy-item": window.vueMaterialize.scrollspyItem 400 | ``` 401 | ```html 402 | 403 | description of target 404 | description of other target 405 | 406 | ``` 407 | [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) 408 | 409 | ### side-nav [top^](#table-of-contents) 410 | ```coffee 411 | # somewhere 412 | Vue.use(require('vue-touch')) 413 | 414 | # in your component 415 | components: 416 | "side-nav": require("vue-materialize/side-nav") 417 | # or with bundle.js 418 | "side-nav": window.vueMaterialize.sideNav 419 | ``` 420 | ```html 421 | 422 |
  • First Text
    • 423 |     424 | ``` 425 | [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) 426 | 427 | ### toaster [top^](#table-of-contents) 428 | ```coffee 429 | # somewhere 430 | Vue.use(require('vue-touch')) 431 | 432 | # in your component 433 | mixins:[ 434 | require("vue-materialize/toaster") 435 | # or with bundle.js 436 | window.vueMaterialize.toaster 437 | ] 438 | ``` 439 | ```coffee 440 | # in the instance (text is mandatory) 441 | @toast(text:"I'm toast", classes:["toast","rounded"], timeout:4000, cb: ->) 442 | #do something on close 443 | ``` 444 | [demo](https://paulpflug.github.io/vue-materialize/#!/toaster) - [source for demo](dev/toaster.vue) - [doc: vue-toaster](https://github.com/vue-comps/vue-toaster) 445 | 446 | ### tooltip [top^](#table-of-contents) 447 | ```coffee 448 | # in your component 449 | components: 450 | "tooltip": require("vue-materialize/tooltip") 451 | # or, when using bundle.js 452 | components: 453 | "tooltip": window.vueMaterialize.tooltip 454 | ``` 455 | ```html 456 | 459 | ``` 460 | [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) 461 | 462 | ### waves [top^](#table-of-contents) 463 | ```coffee 464 | # somewhere 465 | Vue.use(require('vue-touch')) 466 | 467 | # in your component 468 | components: 469 | "waves": require("vue-materialize/waves") 470 | # or, when using bundle.js 471 | components: 472 | "waves": window.vueMaterialize.waves 473 | ``` 474 | ```html 475 | 478 | ``` 479 | [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) 480 | 481 | ## forms 482 | ### radio [top^](#table-of-contents) 483 | ```html 484 | 485 | 486 |
    487 | 488 | 489 |
    490 | ``` 491 | [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) 492 | ### checkbox [top^](#table-of-contents) 493 | ```html 494 | 495 | 496 |
    497 | 498 | 499 |
    500 | ``` 501 | [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) 502 | 503 | ### switch [top^](#table-of-contents) 504 | ```coffee 505 | components: 506 | "switch": require("vue-materialize/switch") 507 | # or with bundle.js 508 | "switch": window.vueMaterialize.switch 509 | ``` 510 | ```html 511 | 512 | SomeOffLabel 513 | SomeOnLabel 514 | 515 | ``` 516 | [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) 517 | 518 | ### input-field [top^](#table-of-contents) 519 | ```coffee 520 | ## whithin your module 521 | components: 522 | "input-field": require("vue-materialize/input-field") 523 | # or with bundle.js 524 | "input-field": window.vueMaterialize.inputField 525 | ``` 526 | ```html 527 |
    528 | 529 | 530 | 531 |
    532 | 533 | 534 | ``` 535 | [demo](https://paulpflug.github.io/vue-materialize/#!/forms/input-field) - [source for demo](dev/forms/input-field.vue) 536 | #### Props [top^](#table-of-contents) 537 | Name | type | default | description 538 | ---:| --- | ---| --- 539 | autofocus | Boolean | false | autofocus 540 | disabled | Boolean | false | disabled 541 | readonly | Boolean | false | readonly 542 | textarea | Boolean | false | use `