Vue Material

Vue Material 是根据 Material Design 规格精确构建的轻量级框架。(Vue Material is lightweight framework built exactly according to the Material Design specs.)

Github stars Tracking Chart

Vue Material 是根据 Material Design 规格精确构建的轻量级框架。

它旨在提供可重用组件和一系列 UI Elements 的集合,以通过 Vue 2 构建支持所有现代 Web 浏览器的应用程序。

构建强大而精心设计的网络应用程序,可以适应每个屏幕。 您可以动态生成和使用主题,使用按需组件,使用易用的API利用UI元素和组件。

浏览器支持

Vue Material支持所有浏览器的最新版本。即:

  • Google Chrome 52+
  • Firefox 48+
  • Safari 9+
  • Opera 38+
  • Edge 12+
  • IE 11

可能在其他浏览器工作,但它未经测试。

Overview

Name With Ownervuematerial/vue-material
Primary LanguageVue
Program languageJavaScript (Language Count: 4)
PlatformLinux, Mac, Windows
License:MIT License
Release Count37
Last Release Namev1.0.0-beta-15 (Posted on 2020-08-13 17:16:26)
First Release Namev0.1.0 (Posted on )
Created At2016-06-17 22:41:53
Pushed At2023-04-11 06:34:44
Last Commit At2023-02-27 11:19:12
Stargazers Count9.9k
Watchers Count225
Fork Count1.2k
Commits Count1.1k
Has Issues Enabled
Issues Count1651
Issue Open Count232
Pull Requests Count549
Pull Requests Open Count15
Pull Requests Close Count176
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private

Vue Material is Simple, lightweight and built exactly according to the Google Material Design specs

Build well-designed apps that can fit on every screen with support to all modern Web Browsers with dynamic themes, components on demand and all with an ease-to-use API

Demo and Documentation

Documentation & demos

Examples

If you are trying to find the documentation for previous versions, please go to old website.

Installation and Usage

Install Vue Material through npm or yarn

npm install vue-material --save
yarn add vue-material

* Others package managers like JSPM and Bower are not supported yet.

Import or require Vue and Vue Material in your code:

import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'

Vue.use(VueMaterial)

Or use individual components:

import Vue from 'vue'
import { MdButton, MdContent, MdTabs } from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'

Vue.use(MdButton)
Vue.use(MdContent)
Vue.use(MdTabs)

Alternativelly you can download and reference the script and the stylesheet in your HTML:

<link rel="stylesheet" href="path/to/vue-material.css">
<script src="path/to/vue-material.js"></script>

Optionally import Roboto font & Material Icons from Google CDN:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic
To the top