Vue Material Design Components

VueJS implementation of Google's Material Components

under development, check the wiki for more ...

Overview

This project originated as a fork of vue-mdc-adapter. It aims to address the shortcomings of vue-mdc-adapter, namely:

• The inability to dynamically change important classes on many of the components (like the disabled state)
• Hardcoded support for many things like theming

Installation

• Install vue-material-design-components

npm install --save vue-material-design-components

• Import google's Material font's and icons:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">

OR - Import icons with webpack and ES6

npm install material-design-icons

import 'material-design-icons/iconfont/material-icons.css'

• Register the vue-material-design-components plugin

import Vue from 'vue'
import VueMdcAdapter from 'vue-material-design-components'

Vue.use(VueMdcAdapter)

OR

import Vue from 'vue'
import VueMdcButton from 'vue-material-design-components/button'

Vue.use(VueMdcButton)

Usage

Each component is intended to be used in one of two "modes": lazy or custom. This project aims to allow the user to mix and match these modes as much as possible, that is, a user may specify some of a component's content in lazy mode, and use custom mode for all other content.

Lazy Mode

When using a component in lazy mode, you can concisely specify much of its content through props and ideally do not need to read any MDC documentation to use it effectively. In addition, you should be able to use the component without interacting with its 'helper' sub-components. However, this may impose some design decisions and limit the usage of the component.

Custom Mode

In custom mode, a component's content is entirely specified by the user through a single unnamed slot. The aim of this mode is to allow full and complete customization of the component. It will, however, be more verbose than lazy mode.

Documentation

Doc coming soon...

In the meantime you can have a look at the preview

Or clone from gitlab

# get the repository
git clone https://[email protected]/griest/vue-material-design-components.git
cd vue-material-design-components

# install dependencies
npm install
 
# serve at localhost:8080
npm run dev