vue 发布_Vue和Material Design开源框架Vuetify发布2.0 release版本

简介

Vuetify Star 数为 20.5K+,提供了 80 多个 Vue.js 组件,这些组件是根据谷歌 Material Design 指南实现的。开箱即用的项目脚手架,Vuetify已预先制作了8个vue-cli(支持vue-cli3)模板,从简单的HTML到全面的服务端渲染(SSR)项目,都只需几分钟就能创建完毕。2.0版本于2019年7月23日发布,vuetify 官网截图:

315639afb01923a328e02025b61fa808.png

2.0 发布官网简介

您好,欢迎来到Vuetify v2.0版本,Arcadia。自开发开始已近8个月,我相信我们已经取得了非常特殊的成就。正如我在去年的VueConf TO演讲中所述,我们对框架的各个方面进行了大规模的改革,使其更易于使用和维护。

  • 将每个组件更新为新的Material Design 2规范
  • 添加了改进的网格系统
  • 每个组件都已更新,具有适当的可访问性(a11y)支持
  • 每个组件都已更新,具有适当的双向性(rtl)支持
  • 从手写笔转换为sass
  • 从javascript转换为打字稿
  • 从avoriaz转换为vue-test-utils
  • 将所有样式和单元测试移动到相应组件的文件夹中

这只是从生活质量变化到新功能(MD2改进之外)的整体框架改进的一小部分。该文档已经大量更新,包含250多个新示例,大量有关如何使用框架内部的更新信息,长期支持的详细信息,扩展的路线图以及更好的组件API显示。我们还设置了一个导出组件api for vetur的过程,以便我们更容易使其保持最新。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-carbon,基于 vue 开发 material design 风格的移动端 WEB UI 库, 设计资源参考 CARBON FrameWork7。安装目前只使用 npm 安装,和使用 webpack 项目的应用npm install vue-carbon --saveimport Vue from 'vue' import VueCarbon from 'vue-carbon' Vue.use(VueCarbon)简单使用例如这个 Refresh Control 组件的demo页面<template> <div class="page">   <header-bar>     <icon-button slot="left" @click="back()" icon="arrow_back"></icon-button>     <span>Refresh Control</span>     <icon-button slot="right" @click="refresh()" icon="refresh"></icon-button>   </header-bar>   <content v-el:trigger>     <refresh-control @refresh="refresh" :trigger="$els.trigger" :refreshing="refreshing"></refresh-control>     <content-block>       <p class="refresh-desc">          按住 - 下拉 - 释放可以刷新数据       </p>     </content-block>     <list>       <item-cell v-for="item in items">         <item-title>           {{item}}         </item-title>       </item-cell>     </list>   </content> </div> </template>[removed]export default {  data () {    return {      items: ['1', '2', '3', '5', '6', '7', '8', '9', '10'],      end: 10,      refreshing: false    }  },  methods: {    back () {      window.history.back()    },    refresh () {      this.refreshing = true      setTimeout(() => {        this.refreshing = false        var arr = []        for (let i = this.end; i < this.end   10; i ) {          arr.push(String(i   1))        }        this.end  = 10        this.items = arr      }, 2000)    }  }}[removed]<style lang="less">.refresh-desc{  text-align: center;}</style>效果如下 标签:VueCarbon
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值