A basic wrapper to use material components with vuejs
Currently a work in progress, many components are not implemented or are missing features.
This depends on vue and material-components-web.
mdc-vue-wrapper can be used with the cdn versions of vue and material-components-web, or it can be used with the locally imported modules with Sass and ES2015, compiled with webpack.
or
import '/path/to/mdc-vue-wrapper.js'
or
<script src="/path/to/mdc-vue-wrapper.js"></script>
<mdc-top-app-bar title="Title">
<template slot="end">
<!-- Right aligned content -->
</template>
</mdc-top-app-bar>
Prop |
Type |
Required |
Default |
Description |
title |
String |
false |
'' |
Title text |
Slot |
Description |
end |
Content in the end section |
<mdc-button raised @click="clickHandler">
Button Text
</mdc-button>
Prop |
Type |
Required |
Default |
Description |
outlined |
Bool |
false |
false |
Outline button style. Incompatible with raised and unelevated |
raised |
Bool |
false |
false |
Elevated button style. Incompatible with outlined and unelevated |
unelevated |
Bool |
false |
false |
Flat button style. Incompatible with outlined and raised |
Icon |
String |
false |
null |
The material-icons name for the icon |
disabled |
Bool |
False |
false |
Disable the button |
Event |
Payload |
Description |
Click |
none |
Fired when the button is clicked |
Slot |
Description |
default |
Button Content |
<mdc-fab icon="add" @click="clickHandler" />
Prop |
Type |
Required |
Default |
Description |
Icon |
String |
true |
null |
The material-icons name for the icon |
Event |
Payload |
Description |
Click |
none |
Fired when the button is clicked |
<mdc-icon-button icon="add" @click="clickHandler" />
Prop |
Type |
Required |
Default |
Description |
Icon |
String |
true |
null |
The material-icons name for the icon |
Event |
Payload |
Description |
Click |
none |
Fired when the button is clicked |