大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

vue-material指的是什么

这篇文章给大家分享的是有关vue-material指的是什么的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

成都创新互联公司长期为上千多家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为曲靖企业提供专业的网站设计制作、网站设计曲靖网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

vue-material是一个建立在谷歌的Material Design基础上的轻量级框架,是一个实现Google像素材料设计的Vue组件库,它提供了适合所有现代Web浏览器的内置动态主题的组件,它的API也简单明了。

Vue Material 是一个轻量级的框架, 建立在谷歌的 Material Design 基础上。 设计强大的和美观的web应用并适用于不同的屏幕。

vue-material指的是什么

vue material是一个实现Google像素材料设计的Vue组件库,它提供了适合所有现代Web浏览器的内置动态主题的组件,它的API也简单明了。

你可以动态地生成和使用主题,根据自己的需求只用组件,UI元素与组件的优势在于可以更简单的使用API和其他的。

它提供一组可重用的组件和一系列的UI元素,使用 Vue 2.0 建立支持 主流的浏览器 的应用。

官网:http://vuematerial.materializecss.cn/#/

安装方法

引入 Roboto 和谷歌 Icons 从谷歌 cdn:


通过 npm 或 yarn 来安装 Vue Material

npm install vue-material
yarn add vue-material

* 其他包管理,比如 JSPM 和 Bower 暂不支持。

或从Github 下载脚本和样式并引入到HTML中:(下载地址https://github.com/marcosmoura/vue-material/archive/master.zip)


用法

启用 Vue Material 在你的应用中通过 Vue.use()。 您也可以单个单个的启用组件:

// To import the whole library
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'

Vue.use(VueMaterial)

// Or to import individual components
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/components/mdCore/index.css' //Required to boot vue material
import 'vue-material/dist/components/mdButton/index.css'
import 'vue-material/dist/components/mdIcon/index.css'
import 'vue-material/dist/components/mdSidenav/index.css'
import 'vue-material/dist/components/mdToolbar/index.css'

Vue.use(VueMaterial.mdCore) //Required to boot vue material
Vue.use(VueMaterial.mdButton)
Vue.use(VueMaterial.mdIcon)
Vue.use(VueMaterial.mdSidenav)
Vue.use(VueMaterial.mdToolbar)

应用主题

为了让 Vue Material 正常工作,你需要配置一个默认的主题。 你也可以一次性注册多个主题。

单个主题

Vue.material.theme.register('default', {
  primary: 'cyan',
  accent: 'pink'
})

多个主题

Vue.material.theme.registerAll({
  default: {
    primary: 'cyan',
    accent: 'pink'
  },
  indigo: {
    primary: 'indigo',
    accent: 'pink'
  }
})

应用你的主题到每一部分代码,你需要使用 v-md-theme 指令:

My App
My Button

感谢各位的阅读!关于vue-material指的是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!


名称栏目:vue-material指的是什么
标题URL:http://dzwzjz.com/article/jhdhpi.html
在线咨询
服务热线
服务热线:028-86922220
TOP