https://github.com/myronliu347/vue-carbon

此项目已停止维护，建议迁移到 https://github.com/museui/muse-ui/
https://github.com/myronliu347/vue-carbon

Last synced: about 1 month ago
JSON representation

此项目已停止维护，建议迁移到 https://github.com/museui/muse-ui/

• Host: GitHub
• URL: https://github.com/myronliu347/vue-carbon
• Owner: myronliu347
• Created: 2016-08-15T01:23:40.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-11-15T06:43:13.000Z (about 8 years ago)
• Last Synced: 2024-10-30T00:36:22.862Z (3 months ago)
• Language: Vue
• Homepage:
• Size: 8.31 MB
• Stars: 861
• Watchers: 69
• Forks: 135
• Open Issues: 10
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-github-vue - vue-carbon - 基于 vue 开发MD风格的移动端 (UI组件)
• awesome-github-vue - vue-carbon - 基于 vue 开发MD风格的移动端 (UI组件)
• awesome - vue-carbon - 基于 vue 开发MD风格的移动端 (UI组件)
• awesome-vue - vue-carbon - carbon?style=social) - 基于 vue 开发MD风格的移动端 (UI组件)

README

        
# vue-carbon

基于 vuejs 1.0 开发 material design 风格的移动端 WEB UI 库, 设计资源参考 [CARBON](http://materialmockups.com/) [FrameWork7](https://github.com/nolimits4web/Framework7)

在线访问地址 [vue-carbon demos](https://myronliu347.github.io/vue-carbon/)

也可以扫描二维码

![](res/website.png)

## 链接

[Vue Carbon 使用文档](https://myronliu347.github.io/vue-carbon/book/v0.5.0/)

[Muse UI](https://museui.github.io) 基于 Vue 2.0 开发 material design ui

## 安装

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

```shell

npm install vue-carbon --save

```

```javascript

import Vue from 'vue'

import VueCarbon from 'vue-carbon'

import 'vue-carbon/dist/vue-carbon.css' // 加载文件

Vue.use(VueCarbon)

```

## 简单使用

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

```html



  

    

    Refresh Control

    

  

  

    

    

      


         按住 - 下拉 - 释放可以刷新数据

      

    

    

      

        

          {{item}}

        

      

    

  



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)

    }

  }

}

.refresh-desc{

  text-align: center;

}

```

效果如下

![](res/refresh.png)

## Licence

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

Copyright (c) 2016 myron