Rubik UI : A new Material Design Vue.js UI Component

rubik

Rubik UI is a new an open source UI component library following the Material Design specifications and visual design for the desktop and mobile terminals. It is compatible with Vue.js 2.0+

Installation and usage

npm install i-rubik --save

main.js

import Rubik from 'i-rubik'

Vue.use(Rubik)

*.vue

export default {
  name: 'app',
  mounted () {
    this.$rubik.init()
   }
    }

<div id="app">
<div class="z-depth-5">
<table class="bordered striped highlight centered">
    <thead>
            <tr>
                    <th>Inputs</th>
                    <th>Other</th>
                    <th>Buttons</th>
            </tr>
    </thead>
    <tbody>
        <tr>
                <td>  <r-input type="password" label="Password"></r-input></td>
                <td> <r-checkbox id="check0" :selected="selected" :val="'red'" label="Checkbox"></r-checkbox></td>
                <td><r-btn primary>Primary</r-btn>
                </td>
        </tr>
    </tbody>
</table>
</div>
</div>

Basic example to render a Table and some inputs using the Rubik library in Vue.js.

Find Rubik's repository on GitHub.

Related open source projects

• materializecss
• material-ui
• iview
• vuetify

Rubik UI : A new Material Design Vue.js UI Component written by Chinese front-end engineer