- 授权协议: MIT
- 开发语言: JavaScript HTML/CSS
- 操作系统: 跨平台
- 软件首页: https://myronliu347.github.io/vue-carbon/
- 软件文档: https://github.com/myronliu347/vue-carbon/blob/master/README.md
- 官方下载: https://github.com/myronliu347/vue-carbon/archive/master.zip
软件介绍
vue-carbon，基于 vue 开发 material design 风格的移动端 WEB UI 库, 设计资源参考 CARBON FrameWork7。
安装
目前只使用 npm 安装，和使用 webpack 项目的应用
npm install vue-carbon --save
import 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>效果如下
