sun-rice

sun-rice

Mobile UI elements for Vue 2.0

Demo

• demo 地址

Tutorial

点击查看使用教程

Usage

CDN 方式：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>sun-rice example</title>
  <!-- import Vue.js -->
  <script src="//vuejs.org/js/vue.min.js"></script>
  <!-- import stylesheet -->
  <link rel="stylesheet" href="//unpkg.com/sun-rice/dist/sun-rice.css">
  <!-- import sun-rice -->
  <script src="//unpkg.com/sun-rice/dist/sun-rice.umd.min.js"></script></head>
<body>
<div id="app">
    <s-button type="default" @click="onClick">Click me!</s-button>
</div>
<script>
  new Vue({
    el: '#app',
    methods: {
      onClick() {
        this.$dialog.alert({
          message: '欢迎使用sun-rice ^_^'
        })
      }
    }
  })
</script>
</body>
</html>

npm 方式：

npm i sun-rice -S

Import all components.

import Vue from 'vue'
import SunRice from 'sun-rice'
import 'sun-rice/dist/sun-rice.css'

Vue.use(SunRice)

Or import specified component. (Use babel-plugin-component)

import { SunCell } from 'sun-rice'

Vue.component(SunCell.name, SunCell)

babel-plugin-component

• Auto import css file
• Modular import component

Installation

npm i babel-plugin-component -D

Usage

.babelrc

{
  "plugins": [
    "other-plugin",
    ["component", [{ "libraryName": "sun-rice", "style": true }]]
  ]
}

Development

npm run dev

Contribution

Please make sure to read the Contributing Guide before making a pull request.