Material-components-vue integrates the mdc-web vanilla components following the simple approach.
- decoupled components
- implementing just the specs not more or less
- keep the components as simple as possible
- keep in sync with changes in the mdc-web repository
- user friendly component api
| Name | ECMA | Minimized |
|---|---|---|
| dist/[component]/index.js | 5 | no |
| dist/[component]/[component].min.js | 5 | yes |
All versions are provided as UMD modules.
| Name | Description |
|---|---|
| dist/[component]/[component].min.css | Minified component CSS |
| dist/[component]/styles.scss | Raw SASS styles (prefered for customization) |
npm install --save material-components-vue
yarn add material-components-vueimport Button from 'material-components-vue/button'
import Card from 'material-components-vue/card'
// ...
Vue.use(Button)
Vue.use(Card)
// ...<html>
<head>
<link rel="stylesheet" href="https://cdnjs.com/libraries/normalize">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/material-components-vue/dist/typography/typography.min.css">
<link rel="stylesheet" href="https://unpkg.com/material-components-vue/dist/button/button.min.css">
</head>
<body>
<div id="app">
<m-typography>
<m-button interactive>Example</m-button>
<m-button interactive raised>Example</m-button>
<m-button interactive stroked>Example</m-button>
</m-typography>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/material-components-vue/dist/typography/typography.min.js"></script>
<script src="https://unpkg.com/material-components-vue/dist/button/button.min.js"></script>
<script>
const app = new Vue({
el: '#app'
})
</script>
</body>
</html>Import all SASS files in the root component of your app or external file for maximal customization:
<style lang="scss">
$mdc-theme-primary: #2196f3;
$mdc-theme-secondary: #ff1744;
$mdc-theme-background: #f5f5f5;
@import "~material-components-vue/theme/styles";
@import "~material-components-vue/button/styles";
@import "~material-components-vue/card/styles";
@import url('https://cdnjs.com/libraries/normalize');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
</style>Don't forget to include the @material directory of your node_modules in your sass-loader options.
Otherwise the components won't compile sucessfully.
Integrate a theme component in your template and pass in an object with CSS custom properties, but keep browser compatibilty in mind.
<m-theme :customStyle="material">
themed content
</m-theme>data() {
return {
material: {
'--mdc-theme-primary-light': '#9162e4',
'--mdc-theme-primary': '#5e35b1',
'--mdc-theme-primary-dark': '#280680',
'--mdc-theme-secondary': '#ff5722',
'--mdc-theme-secondary-light': '#ff8a50',
'--mdc-theme-secondary-dark': '#c41c00',
'--mdc-theme-background': '#ffffff',
'--mdc-theme-text-primary-on-primary': '#ffffff',
'--mdc-theme-text-secondary-on-secondary': '#000000'
}
}
}<style lang="css">
@import "~material-components-vue/theme/styles";
@import url('https://cdnjs.com/libraries/normalize');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
</style>