vue-mdc-adapter

Vue wrapper arround Material Components for the Web

0.0.33
Source
npm

Version published: 7 years ago

Weekly downloads: 238; decreased by-21.45%

Maintainers: 1

Weekly downloads

Created: 7 years ago

Source

vue-mdc-adapter

VueJS wrapper arround Google's Material Components for the Web

under development, check the preview, and the wiki for more ...

NPM Install

npm install --save vue
npm install --save vue-mdc-adapter

Quick Start

Build with webpack:

ES6 Imports

import Vue from 'vue'
import VueMdcAdapter from 'vue-mdc-adapter'
Vue.use(VueMdcAdapter)

SCSS

$mdc-theme-primary: #212121;
$mdc-theme-accent: #41B883;
$mdc-theme-background: #fff;

@import "vue-mdc-adapter/components/styles";

or cherry pick a component:

ES6 Imports

import Vue from 'vue'
import VueMdcButton from 'vue-mdc-adapter/components/button'
Vue.use(VueMdcButton)

SCSS

@import "vue-mdc-adapter/components/button/mdc-button";

CDN

<head>
  <!-- import reset material icons, fonts and vue-mdc-adapter stylesheets -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
  <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">  
  <link rel="stylesheet" href="https://unpkg.com/vue-mdc-adapter/dist/vue-mdc-adapter.min.css">  
  
  <!-- import vue and then vue-mdc-adapter -->
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/vue-mdc-adapter/dist/vue-mdc-adapter.min.js"></script>
</head>
<body>
  <!-- vue mdc markup -->
<body>

Documentation

Please have a look to the preview, and the wiki

Keywords

FAQs

What is vue-mdc-adapter?

Is vue-mdc-adapter popular?

Is vue-mdc-adapter well maintained?

Package last updated on 31 Aug 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install