vuematerial / vue-material Goto Github PK
View Code? Open in Web Editor NEWVue.js Framework - ready-to-use Vue components with Material Design, free forever.
Home Page: https://www.creative-tim.com/vuematerial
License: MIT License
Vue.js Framework - ready-to-use Vue components with Material Design, free forever.
Home Page: https://www.creative-tim.com/vuematerial
License: MIT License
A card is a sheet of material that serves as an entry point to more detailed information.
Specs for Cards
Hi!
So i was wondering if there is a (built-in) way to show the side nav like on the vue-material site?
https://marcosmoura.github.io/vue-material/#/
Can't seem to find it myself.
When using the SELECT component in IE11, the scrollbars do not appear, and items spill outside the dropdown instead. I see this behavior both in my test page and in the official demo (https://marcosmoura.github.io/vue-material/#/components/select). See attachment for a screenshot.
Hello, and thank you for publishing your great work on material design !
I've tried your github.io, and I'm using Firefox 49.
When I go to https://marcosmoura.github.io/vue-material/#/components/tooltip , nothing really happens.
In fact, an error appear in the console : i.classList.forEach is not a function
.
It works on Chromium.
Maybe it's not vue-material, maybe it's vuejs, I don't really know.
I'm sure you'll find it quicker than me !
Hello Mark, blz
Thanks for excellent job in package!
I tried to register the components separately and how was documentation.
Vue.use(VueMaterial.MdCore); //Required to boot vue material
Then the components that need, e.g.
Vue.use(VueMaterial.MdToolbar);
But I looked at your code and the property only worked, at least in my project, with property starting with a lowercase letter, for example.
Vue.use(VueMaterial.mdCore);
Vue.use(VueMaterial.mdToolbar);
It may be a problem with the name resolution in my project, but it will be what happens to anyone else?
If so, just change the doc, thanks
Or, if you are normal for most, please disregard
Hi,
is there a reason for displaying value instead of the text in md-select?
i think it shoud behave like html select:
you click the "text" when dropdown is open (and this works also in vue-material)
and view "text" when the dropdown is closed (at the moment it display the value associated ad md-option.
thanks
/L2K
I see that this package does not include grid system. It would be great if it supports grid system. Anyway, great work out there!
Progress and activity indicators are visual indications of an app loading content.
Specs for Spinner
Hi, vue-material seems very promising! Could you look into why framerate is quite low on mobile Chrome (Android 5)? For example if you compare opening
in mobile browser and toggling sidebar/drawer, and then compare it to some other vue.js material implementations such as
Most run with much higher framerate. It is not only the sidebar, but other animations too, the problem is just most visible with the sidebar action. Perhaps there is a simple change that would fix it across the framework?
Is there anny way of manipulating the state of an toggle button for example:
<md-button class="md-icon-button" @click="toggleBold" :class="{ 'md-toggle': this.state.bold }">
<md-icon>format_bold</md-icon>
</md-button>
It should be activated when the state bold is true... but it does not seem to work this way.
Vue Material is by far my favorite Material Design library for Vue.
Angular Material has a very nice modal/dialog system; is adding a similar component to vue material on the future roadmap?
thanks!
Both on local dev server and in https://marcosmoura.github.io/vue-material/#/components/button
don't work in firefox desktop and also Firefox mobile. Chrome is fine on both platforms
Sorry the question may be stupid, but there is the possibility of it using the "multiselect" already implemented?
Do you have any documentation explaining the properties of each component?
I have an problem with md-input component.
I am getting an error like these when I use md-input with type number
VM1121:2252 Uncaught TypeError: Cannot read property 'constructor' of null(…)hasValue @ VM1123:6get @ VM1121:740evaluate @ VM1121:848computedGetter @ VM1121:1309classes @ VM1123:6get @ VM1121:740evaluate @ VM1121:848computedGetter @ VM1121:1309render @ VM1123:9Vue._render @ VM1121:2240(anonymous function) @ VM1121:1695get @ VM1121:740run @ VM1121:809flushSchedulerQueue @ VM1121:627nextTickHandler @ VM1121:405
5VM1121:2611 [Vue warn]: Invalid prop: type check failed for prop "value". Expected String, got Number.
(found in component <md-input>)
I like vue-material but I need a grid component to show tables. Do plan to implement something like this?
Can I please suggest that Menu bar to be the next in pipeline as it is required on almost all websites.
I can't download the latest version, I see v0.3.0 on https://www.npmjs.com/package/vue-material
but if I run npm view vue-material versions
I get:
[ '0.0.1',
'0.0.2',
'0.0.3',
'0.0.4',
'0.0.5',
'0.0.6',
'0.0.7',
'0.0.8',
'0.0.9',
'0.0.10',
'0.0.11',
'0.0.12',
'0.0.13',
'0.0.14',
'0.0.15',
'0.1.0',
'0.1.1',
'0.1.2',
'0.2.0' ]
Data tables display sets of raw data. They usually appear in desktop enterprise products.
Specs for Data Tables
Snackbars provide brief feedback about an operation through a message at the bottom of the screen.
Specs for Snackbars
I didi the following procedure using Vue2 and a fresh Laravel 5.3 install
npm install --save vue-material
In my js entry file (assets/js/app.js)
import Vue from 'vue'
import VueMaterial from 'vue-material'
Vue.use(VueMaterial);
Vue.material.theme.register('default', {
primary: 'cyan',
accent: 'pink'
});
const app = new Vue({
el: '#app',
)}
In my css entry file (assets/css/app.scss)
@import "node_modules/vue-material/dist/vue-material.css";
In my gulpfile
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
elixir(mix => {
mix.sass('app.scss')
.webpack('app.js');
});
But I get the following error
Error: ./~/vue-material/dist/vue-material.js
│Module build failed: SyntaxError: 'with' in strict mode (8:13503)
it might be a personal preference, but i don't like that vue-material styles the scrollbars by default.
2 reasons:
i guess the fix for this, would be to just comment out https://github.com/marcosmoura/vue-material/blob/master/src/core/stylesheets/core.scss#L3
large and normal classes are in the wrong code example box
For the README.md
import 'vue-material/dist/vue-material.css'
to main.js
var VueMaterial = require('vue-material')
not
import VueMaterial from 'vue-material'
in main.js
to use with vue-cli (vue init webpack)
ps looks awesome!
<md-toolbar>
<div class="md-title">My App</div>
<div class="field-group">
<md-input-container>
<label for="movie">Movie</label>
<md-select name="movie" id="movie">
<md-option value="Fight Club">Fight Club</md-option>
<md-option value="Godfather II">Godfather II</md-option>
<md-option value="Godfather III">Godfather III</md-option>
<md-option value="Godfather">Godfather</md-option>
</md-select>
</md-input-container>
</div>
</md-toolbar>
<md-toolbar>
<div class="md-title">My App</div>
<div class="field-group">
<md-input-container>
<label for="movie2">Movie</label>
<md-select name="movie2" id="movie2">
<md-option value="Fight Club">Fight Club</md-option>
<md-option value="Godfather II">Godfather II</md-option>
<md-option value="Godfather III">Godfather III</md-option>
<md-option value="Godfather">Godfather</md-option>
</md-select>
</md-input-container>
</div>
</md-toolbar>
the select with id movie
is mounted behind the second toolbar.
That is actually expected since it was declared first, so to solve it i'd expected that moving the select to after the toolbar would solve it, but it doesn't.
this happens: Missing input/select/textarea inside md-input-container
, since obviously i move it out of the input container element....
Describe the API of all components.
[q] how to show (overflow) menu programatically?
i want to show a dropdown-like overflow menu when a button is clicked. how can i do this with vue material?
thanks
I've looked at a lot of vue-material they are either old and not compatible with Vue@2 or incomplete and an inconsistent. i like the aim for this package
Vue Material is lightweight framework built exactly according to the Material Design specs.
I would love to see date and time picker implemented as well
A couple of quirks in vue-material docs, perhaps it's ok to list them here for starters:
.md-primary
switch their disabled statekey
, or some other modification[Edited to comment out a couple of fixed bugs. Thanks!]
Setting maxlength in md-textarea resets whatever it is typed when binded to non initialized data. Example:
<md-textarea v-model="foo.description" maxlength="255"></md-textarea>
data() {
return {
foo: {}
}
}
Anything typed in the textarea is deleted within the next milliseconds, the problem dissapears when the attribute "maxlength" is removed.
On the other side, if you initialize the value it lets you write beyond the maxlength
@marcosmoura I'm not managing to scale the size of the input fields and others. How do I do ?
Hello friend, plans for the DatePicker?
how you're going to documentation?
Hello, i've installed new 0.3.0 version. I use default 'select' template from demo, and i get errors in console:
vue.js:2643 [Vue warn]: Error when rendering component md-input-container:
vue.js:2264 TypeError: Cannot read property 'constructor' of null(…)
All other components still works fine.
Any idea?
I've been trying pretty much everything I can think of in order to listen to checkbox change events and set my VueX store accordingly
Please play nice and send the original $event
along as well. I only get true
or false
.
Otherwise my only option is to watch the entire checkbox value collection:
https://laracasts.com/discuss/channels/vue/checkbox-events
Or maybe I'm not binding correctly, it's a jungle trying to find the right way... most docs only show the templating, not how to bind to underlying models.
<md-checkbox
v-for="choice in prompt.choices"
:name="prompt.name"
:id="prompt.name"
@input="updateChoice(e, $event)"
@change="updateChoice"
class="md-primary"
v-model="choice.value">{{ choice.label }}</md-checkbox>
Am I binding my v-model correctly here? v-model="choice.value"
If I try binding to an Array I'm told it must be a String or Boolean. So here I'm binding directly on the incoming Object of the form: {label: 'xyc', value: false}
.
My only other option seems to be to watch on the entire prompt.choices
object for changes!?
export default {
props: ['prompt'],
data () {
return {
}
},
methods: {
// $event x is always just null :(
updateChoice (e, x) {
console.log(e, x)
}
}
}
I am using v0.3 and I have a problem with md-select component.
When I use the md-select component I getting an error like these
vue.js?3de6:2611 [Vue warn]: Error when rendering component <md-input-container>: warn @ vue.js?3de6:2611Vue._render @ vue.js?3de6:2243(anonymous function) @ vue.js?3de6:1695get @ vue.js?3de6:740run @ vue.js?3de6:809flushSchedulerQueue @ vue.js?3de6:627nextTickHandler @ vue.js?3de6:405
vue.js?3de6:2252 Uncaught TypeError: Cannot read property 'constructor' of null
at VueComponent.hasValue (eval at <anonymous> (http://localhost:8080/dist/build.js:1152:1), <anonymous>:6:27402)
at Watcher.get (eval at <anonymous> (http://localhost:8080/dist/build.js:779:1), <anonymous>:740:27)
at Watcher.evaluate (eval at <anonymous> (http://localhost:8080/dist/build.js:779:1), <anonymous>:848:21)
at VueComponent.computedGetter [as hasValue] (eval at <anonymous> (http://localhost:8080/dist/build.js:779:1), <anonymous>:1309:15)
at VueComponent.classes (eval at <anonymous> (http://localhost:8080/dist/build.js:1152:1), <anonymous>:6:27609)
at Watcher.get (eval at <anonymous> (http://localhost:8080/dist/build.js:779:1), <anonymous>:740:27)
at Watcher.evaluate (eval at <anonymous> (http://localhost:8080/dist/build.js:779:1), <anonymous>:848:21)
at Proxy.computedGetter (eval at <anonymous> (http://localhost:8080/dist/build.js:779:1), <anonymous>:1309:15)
at Proxy.render (eval at <anonymous> (http://localhost:8080/dist/build.js:1152:1), <anonymous>:9:3280)
at VueComponent.Vue._render (eval at <anonymous> (http://localhost:8080/dist/build.js:779:1), <anonymous>:2240:22)
The following md-button
<md-button type="submit" class="md-raised md-primary">Save</md-button>
Is rendered as
<button type="button" class="md-button md-raised md-primary">Save</button>
So the type is always rendered as "button"
Hello,
I'm evaluating framework alternatives, and wanted to test vue, and came across this repo which is the one I liked the most.
In the process of making a cordova app, I made a small test, just one page, referenced vue worked fine. Click on button and hello world, But when I tried to add vue-material like: Vue.use(VueMaterial) I got: plugin.apply is not a function
I'm not familiar with vue, so I have no idea what happened here.
Any ideas?
Cheers
I am very interested in your theme control, Can detailed introduction for me ?
I saw that u use laravel, and I wonder compile the components using gulpfile is possible ??
I would love to use the vue material into a new project I'm implementing.
import Vue from 'vue'
import VueMaterial from 'vue-material'
Vue.use(VueMaterial)
Vue.material.theme.register('default', {
primary: 'cyan',
accent: 'pink'
})
gives you the following error
vue-material.js?ec92:6Uncaught TypeError: Cannot set property 'default' of undefined
register @ vue-material.js?ec92:6
(anonymous function) @ main.js?3479:10
(anonymous function) @ app.js:1230
__webpack_require__ @ app.js:556
fn @ app.js:87
(anonymous function) @ app.js:587
__webpack_require__ @ app.js:556
(anonymous function) @ app.js:579
(anonymous function) @ app.js:582
Thank you for your excellent package, it's really helpful.
I have a question though. I am unable to get mdIcon working properly. Let's say I want to get a home icon, I just get an uppercased text displaying 'HOME'. The css stylesheet is functionnal since I use other components from your package.
What am I missing ?
Thank you for your help !
http://codepen.io/nothinggift/pen/BQovGZ
you can scroll horizontally to see it
The md-inputs do not acquire the value of the v-model if their initial value is empty. Example:
In template:
...
<input v-model="foo">
<md-input-container>
<label>Label</label>
<md-input type="text" v-model="foo" required></md-input>
</md-input-container>
...
In code:
...
data() {
return {
foo: null
};
},
created() {
setTimeout(() => {
this.foo = 'bar'
}, 2000);
}
...
The simple input will update it's value after 2 secs but the md-input will remain empty.
This does not happen when foo has any value with length (not null nor empty string).
Hey Marcos,
This is more of a question than an issue. I am using the SELECT component, but unlike the example you have in your docs (https://marcosmoura.github.io/vue-material/#/components/select) my value attribute for the items is different from the item text. However, the control seems to display the selected value rather than the text once an item is selected. Is there a way to display the text instead?
Attached is the screenshot of some sample code.
And here is what my screen looks like after I selected an item with Name "One"
I would prefer if it displayed the Name ("One") rather than the Value ("1"), as it does now.
Once again, thank you for the awesome library!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.