首页 > 代码库 > 基于Vue的Material Design UI库 Vue-Carbon
基于Vue的Material Design UI库 Vue-Carbon
vue-carbon，基于 vue 开发 material design 风格的移动端 WEB UI 库, 设计资源参考 CARBON FrameWork7（app开发公司）。
安装
目前只使用 npm 安装，和使用 webpack 项目的应用（基础教程qkxue.net）
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><script>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) } }}</script><style lang="less">.refresh-desc{ text-align: center;}</style>
基于Vue的Material Design UI库 Vue-Carbon
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。