All Projects → posva → Vue Mdc

posva / Vue Mdc

Licence: mit
Material web components for Vue.js

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vue Mdc

Shrine Materialdesign2
implementation of Material Design 2 Shrine project
Stars: ✭ 215 (-82.33%)
Mutual labels:  google, material, design
Steppers
Steppers view library for Android, based on Google Material design guidelines
Stars: ✭ 786 (-35.41%)
Mutual labels:  material, design
Design System Components
🛠 Component code and tests for the Australian Government design system
Stars: ✭ 696 (-42.81%)
Mutual labels:  design, components
Singledateandtimepicker
You can now select a date and a time with only one widget !
Stars: ✭ 921 (-24.32%)
Mutual labels:  material, design
Ngx Auth Firebaseui
Angular Material UI component for firebase authentication
Stars: ✭ 518 (-57.44%)
Mutual labels:  google, material
Kotlinpleaseanimate
Kotlin, please, can you animate my views ?
Stars: ✭ 541 (-55.55%)
Mutual labels:  material, design
Aiflatswitch
Nicely animated flat design switch alternative to UISwitch
Stars: ✭ 904 (-25.72%)
Mutual labels:  material, design
Alva
Create living prototypes with code components.
Stars: ✭ 3,734 (+206.82%)
Mutual labels:  design, components
Flutter Neumorphic
A complete, ready to use, Neumorphic ui kit for Flutter, 🕶️ dark mode compatible
Stars: ✭ 988 (-18.82%)
Mutual labels:  material, design
Material Bottom Nav
A bottom navigation bar adhering to the Material Design specification.
Stars: ✭ 41 (-96.63%)
Mutual labels:  material, design
Material Design Theme
🎨 A ex-theme for Discord according to Google's Material design Guidelines. Now moved to https://github.com/rauenzi/Nox
Stars: ✭ 50 (-95.89%)
Mutual labels:  material, design
Tutoshowcase
A simple and Elegant Showcase view for Android
Stars: ✭ 499 (-59%)
Mutual labels:  material, design
Shards Vue
🌟Shards Vue is a free, beautiful and modern Vue.js UI kit based on Shards.
Stars: ✭ 390 (-67.95%)
Mutual labels:  design, components
Chips Input Layout
A customizable Android ViewGroup for displaying Chips (specified in the Material Design Guide).
Stars: ✭ 591 (-51.44%)
Mutual labels:  material, design
Material Framework
[Unmaintained] An easy to use material design based framework.
Stars: ✭ 383 (-68.53%)
Mutual labels:  material, design
Depth
Add some Depth to your fragments
Stars: ✭ 789 (-35.17%)
Mutual labels:  material, design
Fiftyshadesof
An elegant context-care loading placeholder for Android
Stars: ✭ 1,110 (-8.79%)
Mutual labels:  material, design
Lab
React UI component design tool
Stars: ✭ 349 (-71.32%)
Mutual labels:  design, components
Material Foundation
Material Design version of Foudation for Sites by Zurb
Stars: ✭ 361 (-70.34%)
Mutual labels:  google, material
Awesomebar
Just beautiful
Stars: ✭ 870 (-28.51%)
Mutual labels:  material, design

If you're looking for vue-mdl, check the mdl branch. To learn about what's happening, check #139



last version Circle CI Codecov Coverage Discord


Vue Material Components web

Material Components Web for Vue.js

This is the adaptation of Material Components web for Vue.js. Keeping them fast, easy to use and, SSR ready.

The docs will be the demo, until then you can check the test folder and the Material Components web demo

Installation

$ npm install --save vue-mdc
# or
$ yarn add vue-mdc

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'
import VueMdc from 'vue-mdc'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'vue-mdc/dist/vue-mdc.css'

Vue.use(VueMdc)

Browser

<!-- Include after Vue -->
<!-- Local files -->
<link rel="stylesheet" href="vue-mdc/dist/vue-mdc.css"></link>
<script src="vue-mdc/dist/vue-mdc.js"></script>

<!-- From CDN -->
<link rel="stylesheet" href="https://unpkg.com/vue-mdc/dist/vue-mdc.css"></link>
<script src="https://unpkg.com/vue-mdc"></script>

Docs

WIP 😁

Development

Launch visual tests

npm run dev

Launch Karma with coverage

npm run dev:coverage

Build

Bundle the js and css of to the dist folder:

npm run build

Publishing

The prepublish hook will ensure dist files are created before publishing. This way you don't need to commit them in your repository.

# Bump the version first
# It'll also commit it and create a tag
npm version
# Push the bumped package and tags
git push --follow-tags
# Ship it 🚀
npm publish

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].