基于vue开发的material design ui库
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
book add docs Oct 1, 2016
build
config 修复打包文件路径出错 Sep 8, 2016
dist
docs
examples 修复 refresh Control的bug,修复picker滑动的bug Nov 15, 2016
res
src-examples add docs Oct 1, 2016
src 修复 refresh Control的bug,修复picker滑动的bug Nov 15, 2016
static 生承gh-pages Sep 3, 2016
test/unit
.babelrc
.editorconfig first commit Aug 15, 2016
.eslintignore first commit Aug 15, 2016
.eslintrc.js
.gitattributes 修改git语言识别 Sep 7, 2016
.gitignore 修改部分组件,修改发布方式,修改安装说明 Sep 7, 2016
.npmignore 发布0.3.0 Sep 11, 2016
README.md 修复 refresh Control的bug,修复picker滑动的bug Nov 15, 2016
index.html 修复 refresh Control的bug,修复picker滑动的bug Nov 15, 2016
package.json 修复 refresh Control的bug,修复picker滑动的bug Nov 15, 2016

README.md

vue-carbon

基于 vuejs 1.0 开发 material design 风格的移动端 WEB UI 库, 设计资源参考 CARBON FrameWork7

在线访问地址 vue-carbon demos

也可以扫描二维码

链接

Vue Carbon 使用文档

Muse UI 基于 Vue 2.0 开发 material design ui

安装

目前只使用与 npm 安装,和使用 webpack 项目的应用

npm install vue-carbon --save
import Vue from 'vue'
import VueCarbon from 'vue-carbon'
import 'vue-carbon/dist/vue-carbon.css' // 加载文件
Vue.use(VueCarbon)

简单使用

例如这个 Refresh Control 组件的demo页面

<template>
<div class="vc-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>

效果如下

Licence

vue-carbon is open source and released under the MIT Licence.

Copyright (c) 2016 myron