- Notifications
You must be signed in to change notification settings - Fork13
It is a materializecss.com implementation with Vue.js.
License
NotificationsYou must be signed in to change notification settings
JackGit/material-ui-vue
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This is amaterializecss.com implementation withVue.js.
npm install material-ui-vue --savenpm install vue --savenpm install webpack --saveDevnpm install vue-loader --saveDevDownload materialize-css resources from theirofficial site or by npm. Include its css and js files, and jQuery as well, coz materialize.js is jquery based.
index.html:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0 "> <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="materialize-css/css/materialize.min.css" media="screen,projection"/> <title>Material-ui-vue Demo</title></head><body> <app></app> <script type="text/javascript" src="http://wedding.jackyang.me/static/javascripts/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="materialize-css/js/materialize.min.js"></script> <script type="text/javascript" src="build/bundle.js"></script></body></html>app.vue:
<template> <div> <dropdown label="I am a dropdown" :large="true"> <ul> <li><a href="#!">Inbox<badge>2</badge></a></li> <li></li> <li><a href="#!">Outbox<badge new>2</badge></a></li> </ul> </dropdown> </div></template><script> module.exports = { components: { 'dropdown': require('material-ui-vue/components/dropdown/dropdown.vue'), 'badge': require('material-ui-vue/components/badges/badge.vue') } };</script>main.js:
var Vue = require('vue');new Vue({ el: 'body', components: { app: require('./app.vue') }});webpack.config.js:
'use strict';var webpack = require('webpack');module.exports = { entry: './main.js', output: { filename: './build/bundle.js', }, module: { loaders: [ {test: /\.vue$/, loader: 'vue'} ] }}webpackNow you can test your index.html in browser.
(And I am working on the detail document...)
About
It is a materializecss.com implementation with Vue.js.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
No releases published
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.