Rubik
Material Design Vue.js UI Components
Install / Use
/learn @ccforward/RubikREADME
关于 Rubik UI
Rubik UI is a Material Design style ui library based Vue.js 2.0+ which can be used for PC and Mobile.
Rubik UI 是一个基于 Vue.js 2.0+ 的开源 UI 组件库,在交互和视觉设计上遵循 Material Design 规范,适用于 PC 端和 mobile 端。
GitHub
https://github.com/ccforward/rubik
NPM
Support
Support Vue.js 2.0+
Not support Vue.js 1.x
Demo
https://ccforward.github.io/rubik/
Usage
npm install
$ npm install i-rubik --save
$ yarn add i-rubik
Rubik init
import Vue from 'vue'
import Rubik from 'i-rubik'
Vue.use(Rubik)
export default {
name: 'app',
mounted(){
this.$rubik.init()
}
}
iconfont
Material Design's iconfont has been writtened in css file
import css
<link href="./node_modules/i-rubik/dist/rubik.min.css" rel="stylesheet" type="text/css">
OR
<link href="//unpkg.com/i-rubik/dist/rubik.min.css" rel="stylesheet" type="text/css">
Releated Projects
Rubik UI 的部分组件和样式代码参考了以下项目
Thanks to
Related Skills
diffs
344.4kUse the diffs tool to produce real, shareable diffs (viewer URL, file artifact, or both) instead of manual edit summaries.
clearshot
Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.
openpencil
2.0kThe world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.
ui-ux-pro-max-skill
56.5kAn AI SKILL that provide design intelligence for building professional UI/UX multiple platforms
