init

init

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitignore

@@ -0,0 +1,19 @@
+*.iml
+.idea
+.ipr
+.iws
+*.diff
+*.patch
+*.bak
+.DS_Store
+node_modules/
+.project
+.settings
+npm-debug.log
+.*proj
+.svn/
+*.swp
+*.swo
+*.log
+/index.html
+/index_prod.html

.npmignore

@@ -0,0 +1,7 @@
+.*
+*.md
+*.yml
+build/
+node_modules/
+local/
+gulpfile.js

README.md

@@ -1,2 +1 @@
 # iview
-A UI components with Vue.js.

build/build-components.js

@@ -0,0 +1,3 @@
+/**
+ * todo 编译.vue组件为.js文件
+ */

build/build-style.js

@@ -0,0 +1,68 @@
+/**
+ * 编译样式文件
+ * iview.css 是基础组件css
+ * iview.pack.css 是套装的全部css
+ * iview.all.css 是基础组件加套装的全部css
+ * packages/*.css 是某个套装的css
+ * article.css 是文章排版的css
+ * */
+var gulp = require('gulp');
+var minifyCSS = require('gulp-minify-css');
+var less = require('gulp-less');
+var rename = require('gulp-rename');
+var concat = require('gulp-concat');
+
+// 组件的基础css
+gulp.task('base', function () {
+     gulp.src('../styles/index.less')
+         .pipe(less())
+         .pipe(minifyCSS())
+         .pipe(rename('iview.css'))
+         .pipe(gulp.dest('../dist/styles'))
+});
+
+// 字体
+gulp.task('fonts', function () {
+    gulp.src('../styles/common/iconfont/fonts/*.*')
+        .pipe(gulp.dest('../dist/styles/fonts'))
+});
+
+// 文章排版
+gulp.task('article', function () {
+    gulp.src('../styles/article/index.less')
+        .pipe(less())
+        .pipe(minifyCSS())
+        .pipe(rename('article.css'))
+        .pipe(gulp.dest('../dist/styles'))
+});
+
+// 套装的全部css
+gulp.task('pack-all', function () {
+    gulp.src('../styles/package.less')
+        .pipe(less())
+        .pipe(minifyCSS())
+        .pipe(rename('iview.pack.css'))
+        .pipe(gulp.dest('../dist/styles'))
+});
+
+// 每个套装的css
+gulp.task('pack', function () {
+    gulp.src(['../styles/packages/*.less', '!../styles/packages/index.less'])
+        .pipe(less())
+        .pipe(minifyCSS())
+        .pipe(rename({
+            prefix: 'iview.pack.'
+        }))
+        .pipe(gulp.dest('../dist/styles/packages'))
+});
+
+// 全部css(包含组件和套装)
+gulp.task('all', function () {
+    gulp.src(['../styles/index.less', '../styles/package.less'])
+        .pipe(less())
+        .pipe(concat('iview.all.css'))
+        .pipe(minifyCSS())
+        .pipe(gulp.dest('../dist/styles'))
+});
+
+gulp.task('default', ['base', 'fonts', 'article', 'pack-all', 'pack', 'all']);

build/vue.config.js

@@ -0,0 +1,12 @@
+var compiler = require('vueify').compiler;
+var fs = require('fs');
+
+var data = fs.readFileSync('../components/button/button.vue', 'utf-8');
+// console.log(data);
+
+var fileContent = data;
+var filePath = '../components/button';
+compiler.compile(fileContent, filePath, function (err, result) {
+    // result is a common js module string
+    console.log(result);
+});

build/webpack.config.js

@@ -0,0 +1,72 @@
+/**
+ * 本地预览
+ */
+
+var path = require('path');
+var webpack = require('webpack');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+    // 入口
+    entry: {
+        main: './local/main',
+        vendors: ['vue', 'vue-router']
+    },
+    // 输出
+    output: {
+        path: path.join(__dirname, '.././local/dist'),
+        publicPath: '/local/dist/',
+        filename: '[name].js',
+        chunkFilename: '[name].chunk.js'
+    },
+    // 加载器
+    module: {
+        loaders: [
+            { test: /\.vue$/, loader: 'vue' },
+            { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
+            { test: /\.css$/, loader: 'style!css!autoprefixer'},
+            { test: /\.less$/, loader: 'style!css!less' },
+            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
+            { test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=8192'},
+            { test: /\.(html|tpl)$/, loader: 'html-loader' }
+        ]
+    },
+    vue: {
+        loaders: {
+            css: ExtractTextPlugin.extract(
+                "style-loader",
+                "css-loader?sourceMap",
+                {
+                    publicPath: "../local/dist/"
+                }
+            ),
+            less: ExtractTextPlugin.extract(
+                'vue-style-loader',
+                'css-loader!less-loader'
+            ),
+            js: 'babel'
+        }
+    },
+    // 转es5
+    babel: {
+        presets: ['es2015'],
+        plugins: ['transform-runtime']
+    },
+    resolve: {
+        // require时省略的扩展名，如：require('module') 不需要module.js
+        extensions: ['', '.js', '.vue'],
+        alias: {
+            iview: '../.././index'
+        }
+    },
+    plugins: [
+        new ExtractTextPlugin("[name].css",{ allChunks : true,resolve : ['modules'] }),             // 提取CSS
+        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),                           // 提取第三方库
+        new HtmlWebpackPlugin({                                                                     // 构建html文件
+            filename: '../../index.html',
+            template: './local/template/index.html',
+            inject: 'body'
+        })
+    ]
+};

components/affix/affix.vue

@@ -0,0 +1,126 @@
+<template>
+    <div>
+        <div :class="classes" :style="styles">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+    const prefixCls = 'ivu-affix';
+
+    function getScroll(target, top) {
+        const prop = top ? 'pageYOffset' : 'pageXOffset';
+        const method = top ? 'scrollTop' : 'scrollLeft';
+
+        let ret = target[prop];
+
+        if (typeof ret !== 'number') {
+            ret = window.document.documentElement[method];
+        }
+
+        return ret;
+    }
+
+    function getOffset(element) {
+        const rect = element.getBoundingClientRect();
+
+        const scrollTop = getScroll(window, true);
+        const scrollLeft = getScroll(window);
+
+        const docEl = window.document.body;
+        const clientTop = docEl.clientTop || 0;
+        const clientLeft = docEl.clientLeft || 0;
+
+        return {
+            top: rect.top + scrollTop - clientTop,
+            left: rect.left + scrollLeft - clientLeft
+        }
+    }
+
+    export default {
+        props: {
+            offsetTop: {
+                type: Number,
+                default: 0
+            },
+            offsetBottom: {
+                type: Number
+            }
+        },
+        data () {
+            return {
+                affix: false,
+                styles: {}
+            }
+        },
+        computed: {
+            offsetType () {
+                let type = 'top';
+                if (this.offsetBottom >= 0) {
+                    type = 'bottom';
+                }
+
+                return type;
+            },
+            classes () {
+                return [
+                    {
+                        [`${prefixCls}`]: this.affix
+                    }
+                ]
+            }
+        },
+        ready () {
+            window.addEventListener('scroll', this.handleScroll, false);
+            window.addEventListener('resize', this.handleScroll, false);
+        },
+        beforeDestroy () {
+            window.removeEventListener('scroll', this.handleScroll, false);
+            window.removeEventListener('resize', this.handleScroll, false);
+        },
+        methods: {
+            handleScroll () {
+                const affix = this.affix;
+                const scrollTop = getScroll(window, true);
+                const elOffset = getOffset(this.$el);
+                const windowHeight = window.innerHeight;
+                const elHeight = this.$el.getElementsByTagName('div')[0].offsetHeight;
+
+                // Fixed Top
+                if ((elOffset.top - this.offsetTop) < scrollTop && this.offsetType == 'top' && !affix) {
+                    this.affix = true;
+                    this.styles = {
+                        top: `${this.offsetTop}px`,
+                        left: `${elOffset.left}px`,
+                        width: `${this.$el.offsetWidth}px`
+                    };
+
+                    this.$emit('on-change', true);
+                } else if ((elOffset.top - this.offsetTop) > scrollTop && this.offsetType == 'top' && affix) {
+                    this.affix = false;
+                    this.styles = null;
+
+                    this.$emit('on-change', false);
+                }
+
+                // Fixed Bottom
+                if ((elOffset.top + this.offsetBottom + elHeight) > (scrollTop + windowHeight) && this.offsetType == 'bottom' && !affix) {
+                    this.affix = true;
+                    this.styles = {
+                        bottom: `${this.offsetBottom}px`,
+                        left: `${elOffset.left}px`,
+                        width: `${this.$el.offsetWidth}px`
+                    };
+
+                    this.$emit('on-change', true);
+                } else if ((elOffset.top + this.offsetBottom + elHeight) < (scrollTop + windowHeight) && this.offsetType == 'bottom' && affix) {
+                    this.affix = false;
+                    this.styles = null;
+                    
+                    this.$emit('on-change', false);
+                }
+            }
+        }
+    }
+</script>

components/affix/index.js

@@ -0,0 +1,2 @@
+import Affix from './affix.vue';
+export default Affix;

components/back-top/back-top.vue

@@ -0,0 +1,90 @@
+<template>
+    <div :class="classes" :style="styles" @click="back">
+        <slot>
+            <div :class="innerClasses">
+                <i class="ivu-icon ivu-icon-chevron-up"></i>
+            </div>
+        </slot>
+    </div>
+</template>
+<script>
+    const prefixCls = 'ivu-back-top';
+
+    function getScroll(target, top) {
+        const prop = top ? 'pageYOffset' : 'pageXOffset';
+        const method = top ? 'scrollTop' : 'scrollLeft';
+
+        let ret = target[prop];
+
+        if (typeof ret !== 'number') {
+            ret = window.document.documentElement[method];
+        }
+
+        return ret;
+    }
+
+    export default {
+        props: {
+            height: {
+                type: Number,
+                default: 400
+            },
+            bottom: {
+                type: Number,
+                default: 30
+            },
+            right: {
+                type: Number,
+                default: 30
+            }
+        },
+        data () {
+            return {
+                backTop: false
+            }
+        },
+        ready () {
+            window.addEventListener('scroll', this.handleScroll, false);
+            window.addEventListener('resize', this.handleScroll, false);
+        },
+        beforeDestroy () {
+            window.removeEventListener('scroll', this.handleScroll, false);
+            window.removeEventListener('resize', this.handleScroll, false);
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-show`]: this.backTop
+                    }
+                ]
+            },
+            styles () {
+                return {
+                    bottom: `${this.bottom}px`,
+                    right: `${this.right}px`
+                }
+            },
+            innerClasses () {
+                return `${prefixCls}-inner`;
+            }
+        },
+        methods: {
+            handleScroll () {
+                const backTop = this.backTop;
+                const scrollTop = getScroll(window, true);
+
+                if (this.height <= scrollTop && !backTop) {
+                    this.backTop = true;
+                } else if (this.height > scrollTop && backTop) {
+                    this.backTop = false;
+                }
+            },
+            back () {
+                window.scrollTo(0, 0);
+                this.$emit('on-click');
+            }
+        }
+    }
+</script>

components/back-top/index.js

@@ -0,0 +1,2 @@
+import BackTop from './back-top.vue';
+export default BackTop;

components/badge/badge.vue

@@ -0,0 +1,77 @@
+<template>
+    <span v-if="dot" :class="classes" v-el:badge>
+        <slot></slot>
+        <sup :class="dotClasses" v-show="badge"></sup>
+    </span>
+    <span v-else :class="classes" v-el:badge>
+        <slot></slot>
+        <sup v-if="count" :class="countClasses" v-show="badge">{{ finalCount }}</sup>
+    </span>
+</template>
+<script>
+    const prefixCls = 'ivu-badge';
+
+    export default {
+        props: {
+            count: [Number, String],
+            dot: {
+                type: Boolean,
+                default: false
+            },
+            overflowCount: {
+                type: [Number, String],
+                default: 99
+            },
+            class: String
+        },
+        computed: {
+            classes () {
+                return `${prefixCls}`;
+            },
+            dotClasses () {
+                return `${prefixCls}-dot`;
+            },
+            countClasses () {
+                return [
+                    `${prefixCls}-count`,
+                    {
+                        [`${this.class}`]: !!this.class,
+                        [`${prefixCls}-count-alone`]: this.alone
+                    }
+                ]
+            },
+            finalCount () {
+                return parseInt(this.count) >= parseInt(this.overflowCount) ? `${this.overflowCount}+` : this.count;
+            },
+            badge () {
+                let status = false;
+
+                if (this.count) {
+                    status = !(parseInt(this.count) === 0);
+                }
+
+                if (this.dot) {
+                    status = true;
+                    if (this.count) {
+                        if (parseInt(this.count) === 0) {
+                            status = false;
+                        }
+                    }
+                }
+
+                return status;
+            }
+        },
+        data () {
+            return {
+                alone: false
+            }
+        },
+        compiled () {
+            const child_length = this.$els.badge.children.length;
+            if (child_length === 1) {
+                this.alone = true;
+            }
+        }
+    }
+</script>

components/badge/index.js

@@ -0,0 +1,2 @@
+import Badge from './badge.vue';
+export default Badge;

components/breadcrumb/breadcrumb-item.vue

@@ -0,0 +1,36 @@
+<template>
+    <span>
+        <a v-if="href" :href="href" :class="linkClasses">
+            <slot></slot>
+        </a>
+        <span v-else :class="linkClasses">
+            <slot></slot>
+        </span>
+        <span :class="separatorClasses">
+            <slot name="separator">{{{ separator }}}</slot>
+        </span>
+    </span>
+</template>
+<script>
+    const prefixCls = 'ivu-breadcrumb-item';
+
+    export default {
+        props: {
+            href: {
+                type: String
+            },
+            separator: {
+                type: String,
+                default: '/'
+            }
+        },
+        computed: {
+            linkClasses () {
+                return `${prefixCls}-link`;
+            },
+            separatorClasses () {
+                return `${prefixCls}-separator`;
+            }
+        }
+    }
+</script>

components/breadcrumb/breadcrumb.vue

@@ -0,0 +1,37 @@
+<template>
+    <div :class="classes">
+        <slot></slot>
+    </div>
+</template>
+<script>
+    const prefixCls = 'ivu-breadcrumb';
+
+    export default {
+        props: {
+            separator: {
+                type: String,
+                default: '/'
+            }
+        },
+        computed: {
+            classes () {
+                return `${prefixCls}`;
+            }
+        },
+        compiled () {
+            this.updateChildren();
+        },
+        methods: {
+            updateChildren () {
+                this.$children.forEach((child) => {
+                    child.separator = this.separator;
+                });
+            }
+        },
+        watch: {
+            separator () {
+                this.updateChildren();
+            }
+        }
+    }
+</script>

components/breadcrumb/index.js

@@ -0,0 +1,5 @@
+import Breadcrumb from './breadcrumb.vue';
+import BreadcrumbItem from './breadcrumb-item.vue';
+
+Breadcrumb.Item = BreadcrumbItem;
+export default Breadcrumb;

components/button/button-group.vue

@@ -0,0 +1,30 @@
+<template>
+    <div :class="classes">
+        <slot></slot>
+    </div>
+</template>
+<script>
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-btn-group';
+
+    export default {
+        props: {
+            size: {
+                validator (value) {
+                    return oneOf(value, ['small', 'large']);
+                }
+            },
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-${this.size}`]: !!this.size
+                    }
+                ]
+            }
+        }
+    }
+</script>

components/button/button.vue

@@ -0,0 +1,56 @@
+<template>
+    <button :type="htmlType" :class="classes" :disabled="disabled">
+        <Icon type="loading" v-if="loading"></Icon>
+        <Icon :type="icon" v-if="icon && !loading"></Icon>
+        <slot></slot>
+    </button>
+</template>
+<script>
+    import Icon from '../icon';
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-btn';
+
+    export default {
+        components: { Icon },
+        props: {
+            type: {
+                validator (value) {
+                    return oneOf(value, ['primary', 'ghost']);
+                }
+            },
+            shape: {
+                validator (value) {
+                    return oneOf(value, ['circle', 'circle-outline']);
+                }
+            },
+            size: {
+                validator (value) {
+                    return oneOf(value, ['small', 'large']);
+                }
+            },
+            loading: Boolean,
+            disabled: Boolean,
+            htmlType: {
+                default: 'button',
+                validator (value) {
+                    return oneOf(value, ['button', 'submit', 'reset']);
+                }
+            },
+            icon: String
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-${this.type}`]: !!this.type,
+                        [`${prefixCls}-${this.shape}`]: !!this.shape,
+                        [`${prefixCls}-${this.size}`]: !!this.size,
+                        [`${prefixCls}-loading`]: this.loading != null && this.loading
+                    }
+                ]
+            }
+        }
+    }
+</script>

components/button/index.js

@@ -0,0 +1,5 @@
+import Button from './button.vue';
+import ButtonGroup from './button-group.vue';
+
+Button.Group = ButtonGroup;
+export default Button;

components/checkbox/checkbox-group.vue

@@ -0,0 +1,51 @@
+<template>
+    <div :class="classes">
+        <slot></slot>
+    </div>
+</template>
+<script>
+    const prefixCls = 'ivu-checkbox-group';
+
+    export default {
+        props: {
+            model: {
+                type: Array,
+                default: []
+            }
+        },
+        computed: {
+            classes () {
+                return `${prefixCls}`;
+            }
+        },
+        compiled () {
+            this.updateModel(true);
+        },
+        methods: {
+            updateModel (update) {
+                const model = this.model;
+
+                this.$children.forEach((child) => {
+                    child.model = model;
+
+                    if (update) {
+                        child.selected = model.indexOf(child.value) >= 0;
+                        child.group = true;
+                    }
+                });
+            },
+            change (data) {
+                this.$emit('on-change', data);
+            }
+        },
+        watch: {
+            model (val, oldVal) {
+                if (val == oldVal) {
+                    this.updateModel();
+                } else {
+                    this.updateModel(true);
+                }
+            }
+        }
+    }
+</script>

components/checkbox/checkbox.vue

@@ -0,0 +1,104 @@
+<template>
+    <label :class="wrapClasses">
+        <span :class="checkboxClasses">
+            <span :class="innerClasses"></span>
+            <input
+                v-if="group"
+                type="checkbox"
+                :class="inputClasses"
+                :disabled="disabled"
+                :value="value"
+                v-model="model"
+                @change="change">
+            <input
+                v-if="!group"
+                type="checkbox"
+                :class="inputClasses"
+                :disabled="disabled"
+                v-model="checked"
+                @change="change">
+        </span>
+        <slot>{{ value }}</slot>
+    </label>
+</template>
+<script>
+    const prefixCls = 'ivu-checkbox';
+
+    export default {
+        props: {
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            value: {
+                type: [String, Number, Boolean]
+            },
+            checked: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                model: [],
+                selected: false,
+                group: false
+            }
+        },
+        computed: {
+            wrapClasses () {
+                return [
+                    `${prefixCls}-wrapper`,
+                    {
+                        [`${prefixCls}-group-item`]: this.group,
+                        [`${prefixCls}-wrapper-checked`]: this.selected,
+                        [`${prefixCls}-wrapper-disabled`]: this.disabled
+                    }
+                ]
+            },
+            checkboxClasses () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-checked`]: this.selected,
+                        [`${prefixCls}-disabled`]: this.disabled
+                    }
+                ]
+            },
+            innerClasses () {
+                return `${prefixCls}-inner`;
+            },
+            inputClasses () {
+                return `${prefixCls}-input`;
+            }
+        },
+        ready () {
+            if (!this.group) {
+                this.updateModel();
+            }
+        },
+        methods: {
+            change (event) {
+                if (this.disabled) {
+                    return false;
+                }
+
+                this.selected = event.target.checked;
+
+                if (this.group) {
+                    this.$parent.change(this.model);
+                } else {
+                    this.$emit('on-change', this.checked);
+                }
+            },
+            updateModel () {
+                this.selected = this.checked;
+            }
+        },
+        watch: {
+            checked () {
+                this.updateModel();
+            }
+        }
+    }
+</script>

components/checkbox/index.js

@@ -0,0 +1,5 @@
+import Checkbox from './checkbox.vue';
+import CheckboxGroup from './checkbox-group.vue';
+
+Checkbox.Group = CheckboxGroup;
+export default Checkbox;

components/circle/circle.vue

@@ -0,0 +1,83 @@
+<template>
+    <div :style="circleSize" :class="wrapClasses">
+        <svg viewBox="0 0 100 100">
+            <path :d="pathString" :stroke="trailColor" :stroke-width="trailWidth" :fill-opacity="0"/>
+            <path :d="pathString" :stroke-linecap="strokeLinecap" :stroke="strokeColor" :stroke-width="strokeWidth" fill-opacity="0" :style="pathStyle"/>
+        </svg>
+        <div :class="innerClasses">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+<script>
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-chart-circle';
+
+    export default {
+        props: {
+            percent: {
+                type: Number,
+                default: 0
+            },
+            size: {
+                type: Number,
+                default: 120
+            },
+            strokeWidth: {
+                type: Number,
+                default: 6
+            },
+            strokeColor: {
+                type: String,
+                default: '#2db7f5'
+            },
+            strokeLinecap: {
+                validator (value) {
+                    return oneOf(value, ['square', 'round']);
+                },
+                default: 'round'
+            },
+            trailWidth: {
+                type: Number,
+                default: 5
+            },
+            trailColor: {
+                type: String,
+                default: '#eaeef2'
+            }
+        },
+        computed: {
+            circleSize () {
+                return {
+                    width: `${this.size}px`,
+                    height: `${this.size}px`
+                };
+            },
+            radius () {
+                return 50 - this.strokeWidth / 2;
+            },
+            pathString () {
+                return `M 50,50 m 0,-${this.radius}
+                a ${this.radius},${this.radius} 0 1 1 0,${2 * this.radius}
+                a ${this.radius},${this.radius} 0 1 1 0,-${2 * this.radius}`;
+            },
+            len () {
+                return Math.PI * 2 * this.radius;
+            },
+            pathStyle () {
+                return {
+                    'stroke-dasharray': `${this.len}px ${this.len}px`,
+                    'stroke-dashoffset': `${((100 - this.percent) / 100 * this.len)}px`,
+                    'transition': 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
+                }
+            },
+            wrapClasses () {
+                return `${prefixCls}`;
+            },
+            innerClasses () {
+                return `${prefixCls}-inner`;
+            }
+        }
+    }
+</script>

components/circle/index.js

@@ -0,0 +1,2 @@
+import Circle from './circle.vue';
+export default Circle;

components/icon/icon.vue

@@ -0,0 +1,27 @@
+<template>
+    <i :class="classes" :style="styles"></i>
+</template>
+<script>
+    const prefixCls = 'ivu-icon';
+
+    export default {
+        props: {
+            type: String,
+            size: [Number, String]
+        },
+        computed: {
+            classes () {
+                return `${prefixCls} ${prefixCls}-${this.type}`
+            },
+            styles () {
+                if (!!this.size) {
+                    return {
+                        'font-size': `${this.size}px`
+                    }
+                } else {
+                    return {}
+                }
+            }
+        }
+    }
+</script>

components/icon/index.js

@@ -0,0 +1,2 @@
+import Icon from './icon.vue';
+export default Icon;

components/input-number/index.js

@@ -0,0 +1,2 @@
+import InputNumber from './input-number.vue';
+export default InputNumber;

components/input-number/input-number.vue

@@ -0,0 +1,236 @@
+<template>
+    <div :class="wrapClasses">
+        <div :class="handlerClasses">
+            <a
+                @click="up"
+                @mouse.down="preventDefault"
+                :class="upClasses">
+                <span
+                    :class="innerUpClasses"
+                    @click="preventDefault">+</span>
+            </a>
+            <a
+                @click="down"
+                @mouse.down="preventDefault"
+                :class="downClasses">
+                <span
+                    :class="innerDownClasses"
+                    @click="preventDefault">-</span>
+            </a>
+        </div>
+        <div :class="inputWrapClasses">
+            <input
+                :class="inputClasses"
+                :disabled="disabled"
+                autoComplete="off"
+                @focus="focus"
+                @blur="blur"
+                @keydown.stop="keyDown"
+                @change="change"
+                :value="value">
+        </div>
+    </div>
+</template>
+<script>
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-input-number';
+
+    function isValueNumber (value) {
+        return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)/).test(value + '');
+    }
+    function addNum (num1, num2) {
+        var sq1, sq2, m;
+        try {
+            sq1 = num1.toString().split(".")[1].length;
+        }
+        catch (e) {
+            sq1 = 0;
+        }
+        try {
+            sq2 = num2.toString().split(".")[1].length;
+        }
+        catch (e) {
+            sq2 = 0;
+        }
+//        if (sq1 === 0 || sq2 === 0) {
+//            return num1 + num2;
+//        } else {
+//            m = Math.pow(10, Math.max(sq1, sq2));
+//            return (num1 * m + num2 * m) / m;
+//        }
+        m = Math.pow(10, Math.max(sq1, sq2));
+        return (num1 * m + num2 * m) / m;
+    }
+
+    export default {
+        props: {
+            max: {
+                type: Number,
+                default: Infinity
+            },
+            min: {
+                type: Number,
+                default: -Infinity
+            },
+            step: {
+                type: Number,
+                default: 1
+            },
+            value: {
+                type: Number,
+                default: 1
+            },
+            size: {
+                validator (value) {
+                    return oneOf(value, ['small', 'large']);
+                }
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                focused: false,
+                upDisabled: false,
+                downDisabled: false
+            }        
+        },
+        computed: {
+            wrapClasses () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-${this.size}`]: !!this.size,
+                        [`${prefixCls}-disabled`]: this.disabled,
+                        [`${prefixCls}-focused`]: this.focused
+                    }
+                ]
+            },
+            handlerClasses () {
+                return `${prefixCls}-handler-wrap`;
+            },
+            upClasses () {
+                return [
+                    `${prefixCls}-handler`,
+                    `${prefixCls}-handler-up`,
+                    {
+                        [`${prefixCls}-handler-up-disabled`]: this.upDisabled
+                    }
+                ]
+            },
+            innerUpClasses () {
+                return `${prefixCls}-handler-up-inner`;
+            },
+            downClasses () {
+                return [
+                    `${prefixCls}-handler`,
+                    `${prefixCls}-handler-down`,
+                    {
+                        [`${prefixCls}-handler-down-disabled`]: this.downDisabled
+                    }
+                ]
+            },
+            innerDownClasses () {
+                return `${prefixCls}-handler-down-inner`;
+            },
+            inputWrapClasses () {
+                return `${prefixCls}-input-wrap`;
+            }
+        },
+        methods: {
+            preventDefault (e) {
+                e.preventDefault();
+            },
+            up () {
+                if (this.upDisabled) {
+                    return false;
+                }
+                this.changeStep('up');
+            },
+            down () {
+                if (this.downDisabled) {
+                    return false;
+                }
+                this.changeStep('down');
+            },
+            changeStep (type) {
+                if (this.disabled) {
+                    return false;
+                }
+
+                let val = Number(this.value);
+                const step = Number(this.step);
+                if (isNaN(val)) {
+                    return false;
+                }
+
+                if (type == 'up') {
+                    val = addNum(val, step);
+                } else if (type == 'down') {
+                    val = addNum(val, -step);
+                }
+                this.setValue(val);
+            },
+            setValue (val) {
+                this.value = val;
+                this.$emit('on-change', val);
+            },
+            focus () {
+                this.focused = true;
+            },
+            blur () {
+                this.focused = false;
+            },
+            keyDown (e) {
+                if (e.keyCode === 38) {
+                    e.preventDefault();
+                    this.up()
+                } else if (e.keyCode === 40) {
+                    e.preventDefault();
+                    this.down()
+                }
+            },
+            change (event) {
+                let val = event.target.value.trim();
+
+                const max = this.max;
+                const min = this.min;
+
+                if (isValueNumber(val)) {
+                    val = Number(val);
+                    if (val > max) {
+                        this.setValue(max);
+                    } else if (val < min) {
+                        this.setValue(min);
+                    } else {
+                        this.setValue(val);
+                    }
+                } else {
+                    event.target.value = this.value;
+                }
+            }
+        },
+        watch: {
+            value (val) {
+                if (isValueNumber(val) || val === 0) {
+                    val = Number(val);
+                    const step = this.step;
+                    if (val + step > this.max) {
+                        this.upDisabled = true;
+                    } else if (val - step < this.min) {
+                        this.downDisabled = true;
+                    } else {
+                        this.upDisabled = false;
+                        this.downDisabled = false;
+                    }
+                } else {
+                    this.upDisabled = true;
+                    this.downDisabled = true;
+                }
+            }
+        }
+    }
+</script>

components/input/index.js

@@ -0,0 +1,2 @@
+import Input from './input.vue';
+export default Input;

components/input/input.vue

@@ -0,0 +1,49 @@
+<template>
+    <input
+        :class="classes"
+        :type="type"
+        :placeholder="placeholder"
+        :name="name"
+        v-model="value">
+</template>
+<script>
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-input';
+
+    export default {
+        props: {
+            type: {
+                type: String,
+                default: 'text'
+            },
+            value: {
+                type: [String, Number],
+                default: '',
+                twoWay: true
+            },
+            placeholder: String,
+            name: String,
+            size: {
+                validator (value) {
+                    return oneOf(value, ['small', 'large']);
+                }
+            }
+        },
+        data () {
+            return {
+            
+            }        
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-${this.size}`]: !!this.size
+                    }
+                ]
+            }
+        }
+    }
+</script>

components/layout/col.vue

@@ -0,0 +1,36 @@
+<template>
+    <div :class="classes">
+        <slot></slot>
+    </div>
+</template>
+<script>
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-col';
+
+    export default {
+        props: {
+            span: [Number, String],
+            order: [Number, String],
+            offset: [Number, String],
+            push: [Number, String],
+            pull: [Number, String],
+            className: String
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-span-${this.span}`]: this.span,
+                        [`${prefixCls}-order-${this.order}`]: this.order,
+                        [`${prefixCls}-offset-${this.offset}`]: this.offset,
+                        [`${prefixCls}-push-${this.push}`]: this.push,
+                        [`${prefixCls}-pull-${this.pull}`]: this.pull,
+                        [`${this.className}`]: !!this.className
+                    }
+                ]
+            }
+        }
+    }
+</script>

components/layout/index.js

@@ -0,0 +1,4 @@
+import Row from './row.vue';
+import Col from './col.vue';
+
+export { Row, Col };

components/layout/row.vue

@@ -0,0 +1,44 @@
+<template>
+    <div :class="classes">
+        <slot></slot>
+    </div>
+</template>
+<script>
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-row';
+
+    export default {
+        props: {
+            type: {
+                validator (value) {
+                    return oneOf(value, ['flex']);
+                }
+            },
+            align: {
+                validator (value) {
+                    return oneOf(value, ['top', 'middle', 'bottom']);
+                }
+            },
+            justify: {
+                validator (value) {
+                    return oneOf(value, ['start', 'end', 'center', 'space-around', 'space-between']);
+                }
+            },
+            className: String
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-${this.type}`]: !!this.type,
+                        [`${prefixCls}-${this.type}-${this.align}`]: !!this.align,
+                        [`${prefixCls}-${this.type}-${this.justify}`]: !!this.justify,
+                        [`${this.className}`]: !!this.className
+                    }
+                ]
+            }
+        }
+    }
+</script>

components/page/index.js

@@ -0,0 +1,2 @@
+import Page from './page.vue';
+export default Page;

components/page/options.vue

@@ -0,0 +1,79 @@
+<template>
+    <div v-if="showSizer || showElevator" :class="optsClasses">
+        <div v-if="showSizer" :class="sizerClasses">
+            <select v-model="pageSize" @change="changeSize">
+                <option :value="item" v-for="item in pageSizeOpts">{{ item }} 条/页</option>
+            </select>
+        </div>
+        <div v-if="showElevator" :class="ElevatorClasses">
+            跳至
+            <input type="text" :value="_current" @keyup.enter="changePage">
+            页
+        </div>
+    </div>
+</template>
+<script>
+    const prefixCls = 'ivu-page';
+
+    function isValueNumber (value) {
+        return (/^[1-9][0-9]*$/).test(value + '');
+    }
+
+    export default {
+        props: {
+            pageSizeOpts: Array,
+            showSizer: Boolean,
+            showElevator: Boolean,
+            current: Number,
+            _current: Number,
+            pageSize: Number,
+            allPages: Number
+        },
+        computed: {
+            optsClasses () {
+                return [
+                    `${prefixCls}-options`
+                ]
+            },
+            sizerClasses () {
+                return [
+                    `${prefixCls}-options-sizer`
+                ]
+            },
+            ElevatorClasses () {
+                return [
+                    `${prefixCls}-options-elevator`
+                ]
+            }
+        },
+        methods: {
+            changeSize () {
+                this.$emit('on-size', this.pageSize);
+            },
+            changePage (event) {
+                let val = event.target.value.trim();
+                let page = 0;
+
+                if (isValueNumber(val)) {
+                    val = Number(val);
+                    if (val != this.current) {
+                        const allPages = this.allPages;
+
+                        if (val > allPages) {
+                            page = allPages;
+                        } else {
+                            page = val;
+                        }
+                    }
+                } else {
+                    page = 1;
+                }
+
+                if (page) {
+                    this.$emit('on-page', page);
+                    event.target.value = page;
+                }
+            }
+        }
+    }
+</script>

components/page/page.vue

@@ -0,0 +1,230 @@
+<template>
+    <ul :class="simpleWrapClasses" v-if="simple">
+        <li
+            title="上一页"
+            :class="prevClasses"
+            @click="prev">
+            <a>←</a>
+        </li>
+        <div :title="current + '/' + allPages">
+            <input
+                type="text"
+                :value="current"
+                @keydown="keyDown"
+                @keyup="keyUp"
+                @change="keyUp">
+            <span>/</span>
+            {{ allPages }}
+        </div>
+        <li
+            title="下一页"
+            :class="nextClasses"
+            @click="next">
+            <a>→</a>
+        </li>
+    </ul>
+    <ul :class="wrapClasses" v-else>
+        <span :class="[`${prefixCls}-total`]" v-if="showTotal">
+            <slot>共 {{ total }} 条</slot>
+        </span>
+        <li
+            title="上一页"
+            :class="prevClasses"
+            @click="prev">
+            <a>←</a>
+        </li>
+        <li title="第一页" :class="[`${prefixCls}-item`,{[`${prefixCls}-item-active`]: current == 1}]" @click="changePage(1)"><a>1</a></li>
+        <li title="向前 5 页" v-if="current - 3 > 1" :class="[`${prefixCls}-item-jump-prev`]" @click="fastPrev"><a>…</a></li>
+        <li :title="current - 2" v-if="current - 2 > 1" :class="[`${prefixCls}-item`]" @click="changePage(current - 2)"><a>{{ current - 2 }}</a></li>
+        <li :title="current - 1" v-if="current - 1 > 1" :class="[`${prefixCls}-item`]" @click="changePage(current - 1)"><a>{{ current - 1 }}</a></li>
+        <li :title="current" v-if="current != 1 && current != allPages" :class="[`${prefixCls}-item`,`${prefixCls}-item-active`]"><a>{{ current }}</a></li>
+        <li :title="current + 1" v-if="current + 1 < allPages" :class="[`${prefixCls}-item`]" @click="changePage(current + 1)"><a>{{ current + 1 }}</a></li>
+        <li :title="current + 2" v-if="current + 2 < allPages" :class="[`${prefixCls}-item`]" @click="changePage(current + 2)"><a>{{ current + 2 }}</a></li>
+        <li title="向后 5 页" v-if="current + 3 < allPages" :class="[`${prefixCls}-item-jump-next`]" @click="fastNext"><a>…</a></li>
+        <li :title="'最后一页:' + allPages" :class="[`${prefixCls}-item`, {[`${prefixCls}-item-active`]: current == allPages}]" @click="changePage(allPages)"><a>{{ allPages }}</a></li>
+        <li
+            title="下一页"
+            :class="nextClasses"
+            @click="next">
+            <a>→</a>
+        </li>
+        <Options
+            :show-sizer="showSizer"
+            :page-size="pageSize"
+            :page-size-opts="pageSizeOpts"
+            :show-elevator="showElevator"
+            :_current.once="current"
+            :current.sync="current"
+            :all-pages="allPages"
+            @on-size="onSize"
+            @on-page="onPage">
+        </Options>
+    </ul>
+</template>
+<script>
+    import { oneOf } from '../../utils/assist';
+    import Options from './options.vue';
+
+    const prefixCls = 'ivu-page';
+
+    export default {
+        components: { Options },
+        props: {
+            current: {
+                type: Number,
+                default: 1
+            },
+            total: {
+                type: Number,
+                default: 0
+            },
+            pageSize: {
+                type: Number,
+                default: 10
+            },
+            pageSizeOpts: {
+                type: Array,
+                default () {
+                    return [10, 20, 30, 40]
+                }
+            },
+            size: {
+                validator (value) {
+                    return oneOf(value, ['small']);
+                }
+            },
+            simple: {
+                type: Boolean,
+                default: false
+            },
+            showTotal: {
+                type: Boolean,
+                default: false
+            },
+            showElevator: {
+                type: Boolean,
+                default: false
+            },
+            showSizer: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls
+            }
+        },
+        computed: {
+            allPages () {
+                return Math.ceil(this.total / this.pageSize);
+            },
+            simpleWrapClasses () {
+                return [
+                    `${prefixCls}`,
+                    `${prefixCls}-simple`
+                ]
+            },
+            wrapClasses () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        'mini': !!this.size
+                    }
+                ]
+            },
+            prevClasses () {
+                return [
+                    `${prefixCls}-prev`,
+                    {
+                        [`${prefixCls}-disabled`]: this.current == 1
+                    }
+                ]
+            },
+            nextClasses () {
+                return [
+                    `${prefixCls}-next`,
+                    {
+                        [`${prefixCls}-disabled`]: this.current == this.allPages
+                    }
+                ]
+            }
+        },
+        methods: {
+            changePage (page) {
+                if (this.current != page) {
+                    this.current = page;
+                    this.$emit('on-change', page);
+                }
+            },
+            prev () {
+                const current = this.current;
+                if (current <= 1) {
+                    return false;
+                }
+                this.changePage(current - 1);
+            },
+            next () {
+                const current = this.current;
+                if (current >= this.allPages) {
+                    return false;
+                }
+                this.changePage(current + 1);
+            },
+            fastPrev () {
+                const page = this.current - 5;
+                if (page > 0) {
+                    this.changePage(page);
+                } else {
+                    this.changePage(1);
+                }
+            },
+            fastNext () {
+                const page = this.current + 5;
+                if (page > this.allPages) {
+                    this.changePage(this.allPages);
+                } else {
+                    this.changePage(page);
+                }
+            },
+            onSize (pageSize) {
+                this.pageSize = pageSize;
+                this.changePage(1);
+            },
+            onPage (page) {
+                this.changePage(page);
+            },
+            keyDown (e) {
+                const key = e.keyCode;
+                const condition = (key >= 48 && key <= 57) || key == 8 || key == 37 || key == 39;
+
+                if (!condition) {
+                    e.preventDefault();
+                }
+            },
+            keyUp (e) {
+                const key = e.keyCode;
+                const val = parseInt(e.target.value);
+
+                if (key === 38) {
+                    this.prev()
+                } else if (key === 40) {
+                    this.next()
+                } else if (key == 13) {
+                    let page = 1;
+
+                    if (val > this.allPages) {
+                        page = this.allPages;
+                    } else if (val <= 0) {
+                        page = 1;
+                    } else {
+                        page = val;
+                    }
+
+                    e.target.value = page;
+                    this.changePage(page);
+                }
+            }
+        }
+    }
+</script>

components/progress/index.js

@@ -0,0 +1,2 @@
+import Progress from './progress.vue';
+export default Progress;

components/progress/progress.vue

@@ -0,0 +1,121 @@
+<template>
+    <div :class="wrapClasses">
+        <span v-if="!hideInfo" :class="textClasses">
+            <slot>
+                <span v-if="isStatus" :class="textInnerClasses">
+                    <Icon :type="statusIcon"></Icon>
+                </span>
+                <span v-else :class="textInnerClasses">
+                    {{ percent }}%
+                </span>
+            </slot>
+        </span>
+        <div :class="outerClasses">
+            <div :class="innerClasses">
+                <div :class="bgClasses" :style="bgStyle"></div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import Icon from '../icon';
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-progress';
+
+    export default {
+        components: { Icon },
+        props: {
+            percent: {
+                type: Number,
+                default: 0
+            },
+            status: {
+                validator (value) {
+                    return oneOf(value, ['normal', 'active', 'wrong', 'success']);
+                },
+                default: 'normal'
+            },
+            hideInfo: {
+                type: Boolean,
+                default: false
+            },
+            strokeWidth: {
+                type: Number,
+                default: 10
+            }
+        },
+        computed: {
+            isStatus () {
+                return this.status == 'wrong' || this.status == 'success';
+            },
+            statusIcon () {
+                let type = '';
+                switch (this.status) {
+                    case 'wrong':
+                        type = 'ios-close-empty';
+                        break;
+                    case 'success':
+                         type = 'ios-checkmark-empty';
+                        break;
+                }
+
+                return type;
+            },
+            bgStyle () {
+                return {
+                    width: `${this.percent}%`,
+                    height: `${this.strokeWidth}px`
+                }
+            },
+            wrapClasses () {
+                return [
+                    `${prefixCls}`,
+                    `${prefixCls}-${this.status}`,
+                    {
+                        [`${prefixCls}-show-info`]: !this.hideInfo,
+
+                    }
+                ]
+            },
+            textClasses () {
+                return `${prefixCls}-text`;
+            },
+            textInnerClasses () {
+                return `${prefixCls}-text-inner`;
+            },
+            outerClasses () {
+                return `${prefixCls}-outer`;
+            },
+            innerClasses () {
+                return `${prefixCls}-inner`;
+            },
+            bgClasses () {
+                return `${prefixCls}-bg`;
+            }
+        },
+        compiled () {
+            this.handleStatus();
+        },
+        methods: {
+            handleStatus (isDown) {
+                if (isDown) {
+                    this.status = 'normal';
+                } else {
+                    if (parseInt(this.percent, 10) == 100) {
+                        this.status = 'success';
+                    }
+                }
+            }
+        },
+        watch: {
+            percent (val, oldVal) {
+                if (val < oldVal) {
+                    this.handleStatus(true);
+                } else {
+                    this.handleStatus();
+                }
+            }
+        }
+    }
+</script>

components/radio/index.js

@@ -0,0 +1,5 @@
+import Radio from './radio.vue';
+import RadioGroup from './radio-group.vue';
+
+Radio.Group = RadioGroup;
+export default Radio;

components/radio/radio-group.vue

@@ -0,0 +1,62 @@
+<template>
+    <div :class="classes">
+        <slot></slot>
+    </div>
+</template>
+<script>
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-radio-group';
+
+    export default {
+        props: {
+            model: {
+                type: [String, Number],
+                default: ''
+            },
+            size: {
+                validator (value) {
+                    return oneOf(value, ['small', 'large']);
+                }
+            },
+            type: {
+                validator (value) {
+                    return oneOf(value, ['button']);
+                }
+            }
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-${this.size}`]: !!this.size,
+                        [`${prefixCls}-${this.type}`]: !!this.type
+                    }
+                ]
+            }
+        },
+        compiled () {
+            this.updateModel();
+        },
+        methods: {
+            updateModel () {
+                const model = this.model;
+                this.$children.forEach((child) => {
+                    child.selected = model == child.value;
+                    child.group = true;
+                });
+            },
+            change (data) {
+                this.model = data.value;
+                this.updateModel();
+                this.$emit('on-change', data.value);
+            }
+        },
+        watch: {
+            model () {
+                this.updateModel()
+            }
+        }
+    }
+</script>

components/radio/radio.vue

@@ -0,0 +1,96 @@
+<template>
+    <label :class="wrapClasses">
+        <span :class="radioClasses">
+            <span :class="innerClasses"></span>
+            <input
+                type="radio"
+                :class="inputClasses"
+                :disabled="disabled"
+                :checked="selected"
+                @change="change">
+        </span>
+        <slot>{{ value }}</slot>
+    </label>
+</template>
+<script>
+    const prefixCls = 'ivu-radio';
+
+    export default {
+        props: {
+            checked: {
+                type: Boolean,
+                default: false
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            value: {
+                type: [String, Number]
+            }
+        },
+        data () {
+            return {
+                selected: false,
+                group: false
+            }
+        },
+        computed: {
+            wrapClasses () {
+                return [
+                    `${prefixCls}-wrapper`,
+                    {
+                        [`${prefixCls}-group-item`]: this.group,
+                        [`${prefixCls}-wrapper-checked`]: this.selected,
+                        [`${prefixCls}-wrapper-disabled`]: this.disabled
+                    }
+                ]
+            },
+            radioClasses () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-checked`]: this.selected,
+                        [`${prefixCls}-disabled`]: this.disabled
+                    }
+                ]
+            },
+            innerClasses () {
+                return `${prefixCls}-inner`;
+            },
+            inputClasses () {
+                return `${prefixCls}-input`;
+            }
+        },
+        ready () {
+            if (!this.group) {
+                this.updateModel();
+            }
+        },
+        methods: {
+            change (event) {
+                if (this.disabled) {
+                    return false;
+                }
+
+                this.selected = event.target.checked;
+                this.checked = this.selected;
+
+                if (this.group && this.checked) {
+                    this.$parent.change({
+                        value: this.value,
+                        checked: this.checked
+                    });
+                }
+            },
+            updateModel () {
+                this.selected = this.checked;
+            }
+        },
+        watch: {
+            checked () {
+                this.updateModel();
+            }
+        }
+    }
+</script>

components/spin/index.js

@@ -0,0 +1,2 @@
+import Spin from './spin.vue';
+export default Spin;

components/spin/spin.vue

@@ -0,0 +1,60 @@
+<template>
+    <div :class="classes" transition="fade">
+        <div :class="mainClasses">
+            <span :class="dotClasses"></span>
+            <div :class="textClasses" v-el:text><slot></slot></div>
+        </div>
+    </div>
+</template>
+<script>
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-spin';
+
+    export default {
+        props: {
+            size: {
+                validator (value) {
+                    return oneOf(value, ['small', 'large']);
+                }
+            },
+            fix: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                showText: false
+            }
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-${this.size}`]: !!this.size,
+                        [`${prefixCls}-fix`]: this.fix,
+                        [`${prefixCls}-show-text`]: this.showText,
+                    }
+                ]
+            },
+            mainClasses () {
+                return `${prefixCls}-main`;
+            },
+            dotClasses () {
+                return `${prefixCls}-dot`;
+            },
+            textClasses () {
+                return `${prefixCls}-text`;
+            }
+        },
+        compiled () {
+            const text = this.$els.text.innerHTML;
+
+            if (text != '') {
+                this.showText = true;
+            }
+        }
+    }
+</script>

components/steps/index.js

@@ -0,0 +1,5 @@
+import Steps from './steps.vue';
+import Step from './step.vue';
+
+Steps.Step = Step;
+export default Steps;

components/steps/step.vue

@@ -0,0 +1,88 @@
+<template>
+    <div :class="wrapClasses">
+        <div :class="[`${prefixCls}-tail`]"></div>
+        <div :class="[`${prefixCls}-head`]">
+            <div :class="[`${prefixCls}-head-inner`]">
+                <span v-if="!icon && status != 'finish' && status != 'error'">{{ stepNumber }}</span>
+                <span v-else :class="iconClasses"></span>
+            </div>
+        </div>
+        <div :class="[`${prefixCls}-main`]">
+            <div :class="[`${prefixCls}-title`]">{{ title }}</div>
+            <div v-if="content" :class="[`${prefixCls}-content`]">{{ content }}</div>
+        </div>
+    </div>
+</template>
+<script>
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-steps';
+    const iconPrefixCls = 'ivu-icon';
+
+    export default {
+        props: {
+            status: {
+                validator (value) {
+                    return oneOf(value, ['wait', 'process', 'finish', 'error']);
+                }
+            },
+            title: {
+                type: String,
+                default: ''
+            },
+            content: {
+                type: String
+            },
+            icon: {
+                type: String
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls,
+                stepNumber: '',
+                nextError: false
+            }
+        },
+        computed: {
+            wrapClasses () {
+                return [
+                    `${prefixCls}-item`,
+                    `${prefixCls}-status-${this.status}`,
+                    {
+                        [`${prefixCls}-custom`]: !!this.icon,
+                        [`${prefixCls}-next-error`]: this.nextError
+                    }
+                ]
+            },
+            iconClasses () {
+                let icon = '';
+
+                if (!!this.icon) {
+                    icon = this.icon;
+                } else {
+                    if (this.status == 'finish') {
+                        icon = 'ios-checkmark-empty';
+                    } else if (this.status == 'error') {
+                        icon = 'ios-close-empty';
+                    }
+                }
+
+                return [
+                    `${prefixCls}-icon`,
+                    `${iconPrefixCls}`,
+                    {
+                        [`${iconPrefixCls}-${icon}`]: icon != ''
+                    }
+                ]
+            }
+        },
+        watch: {
+            status () {
+                if (this.status == 'error') {
+                    this.$parent.setNextError();
+                }
+            }
+        }
+    }
+</script>

components/steps/steps.vue

@@ -0,0 +1,102 @@
+<template>
+    <div :class="classes">
+        <slot></slot>
+    </div>
+</template>
+<script>
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-steps';
+
+    export default {
+        props: {
+            current: {
+                type: Number,
+                default: 0
+            },
+            status: {
+                validator (value) {
+                    return oneOf(value, ['wait', 'process', 'finish', 'error']);
+                },
+                default: 'process'
+            },
+            size: {
+                validator (value) {
+                    return oneOf(value, ['small']);
+                }
+            },
+            direction: {
+                validator (value) {
+                    return oneOf(value, ['horizontal', 'vertical']);
+                },
+                default: 'horizontal'
+            }
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    `${prefixCls}-${this.direction}`,
+                    {
+                        [`${prefixCls}-${this.size}`]: !!this.size
+                    }
+                ]
+            }
+        },
+        ready () {
+            this.updateChildProps(true);
+            this.setNextError();
+            this.updateCurrent(true);
+        },
+        methods: {
+            updateChildProps (isInit) {
+                this.$children.forEach((child, index) => {
+                    child.stepNumber = index + 1;
+
+                    // 如果已存在status,且在初始化时,则略过
+                    // todo 如果当前是error,在current改变时需要处理
+                    if (!(isInit && child.status)) {
+                        if (index == this.current) {
+                            if (this.status != 'error') {
+                                child.status = 'process';
+                            }
+                        } else if (index < this.current) {
+                            child.status = 'finish';
+                        } else {
+                            child.status = 'wait';
+                        }
+                    }
+
+                    if (child.status != 'error' && index != 0) {
+                        this.$children[index - 1].nextError = false;
+                    }
+                });
+            },
+            setNextError () {
+                this.$children.forEach((child, index) => {
+                    if (child.status == 'error' && index != 0) {
+                        this.$children[index - 1].nextError = true;
+                    }
+                });
+            },
+            updateCurrent (isInit) {
+                if (isInit) {
+                    const current_status = this.$children[this.current].status;
+                    if (!current_status) {
+                        this.$children[this.current].status = this.status;
+                    }
+                } else {
+                    this.$children[this.current].status = this.status;
+                }
+            }
+        },
+        watch: {
+            current () {
+                this.updateChildProps();
+            },
+            status () {
+                this.updateCurrent();
+            }
+        }
+    }
+</script>

components/switch/index.js

@@ -0,0 +1,2 @@
+import Switch from './switch.vue';
+export default Switch;

components/switch/switch.vue

@@ -0,0 +1,56 @@
+<template>
+    <span :class="wrapClasses" @click="toggle">
+        <span :class="innerClasses">
+            <slot name="open" v-if="checked"></slot>
+            <slot name="close" v-if="!checked"></slot>
+        </span>
+    </span>
+</template>
+<script>
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-switch';
+
+    export default {
+        props: {
+            checked: {
+                type: Boolean,
+                default: false
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            size: {
+                validator (value) {
+                    return oneOf(value, ['small']);
+                }
+            }
+        },
+        computed: {
+            wrapClasses () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-checked`]: this.checked,
+                        [`${prefixCls}-disabled`]: this.disabled,
+                        [`${prefixCls}-${this.size}`]: !!this.size
+                    }
+                ]
+            },
+            innerClasses () {
+                return `${prefixCls}-inner`;
+            }
+        },
+        methods: {
+            toggle () {
+                if (this.disabled) {
+                    return false;
+                }
+
+                this.checked = !this.checked;
+                this.$emit('on-change', this.checked);
+            }
+        }
+    }
+</script>

components/tag/index.js

@@ -0,0 +1,2 @@
+import Tag from './tag.vue';
+export default Tag;

components/tag/tag.vue

@@ -0,0 +1,51 @@
+<template>
+    <div v-if="!closed" :class="classes" transition="fade">
+        <span :class="textClasses"><slot></slot></span>
+        <Icon v-if="closable" type="ios-close-empty" @click="close"></Icon>
+    </div>
+</template>
+<script>
+    import Icon from '../icon';
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-tag';
+
+    export default {
+        components: { Icon },
+        props: {
+            closable: {
+                type: Boolean,
+                default: false
+            },
+            color: {
+                validator (value) {
+                    return oneOf(value, ['blue', 'green', 'red', 'yellow']);
+                }
+            }
+        },
+        data () {
+            return {
+                closed: false
+            }
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-${this.color}`]: !!this.color
+                    }
+                ]
+            },
+            textClasses () {
+                return `${prefixCls}-text`;
+            }
+        },
+        methods: {
+            close (e) {
+                this.closed = true;
+                this.$emit('on-close', e);
+            }
+        }
+    }
+</script>

components/timeline/index.js

@@ -0,0 +1,5 @@
+import Timeline from './timeline.vue';
+import TimelineItem from './timeline-item.vue';
+
+Timeline.Item = TimelineItem;
+export default Timeline;

components/timeline/timeline-item.vue

@@ -0,0 +1,67 @@
+<template>
+    <li :class="itemClasses">
+        <div :class="tailClasses"></div>
+        <div :class="headClasses" :style="customColor">
+            <slot name="dot"></slot>
+        </div>
+        <div :class="contentClasses">
+            <slot></slot>
+        </div>
+    </li>
+</template>
+<script>
+    const prefixCls = 'ivu-timeline';
+
+    export default {
+        props: {
+            color: {
+                type: String,
+                default: 'blue'
+            }
+        },
+        data () {
+            return {
+                dot: false
+            }
+        },
+        ready () {
+            this.dot = this.$children.length ? true : false;
+        },
+        computed: {
+            itemClasses () {
+                return `${prefixCls}-item`;
+            },
+            tailClasses () {
+                return `${prefixCls}-item-tail`;
+            },
+            headClasses () {
+                return [
+                    `${prefixCls}-item-head`,
+                    {
+                        [`${prefixCls}-item-head-custom`]: this.dot,
+                        [`${prefixCls}-item-head-${this.color}`]: this.headColorShow
+                    }
+                ]
+            },
+            headColorShow () {
+                return this.color == 'blue' || this.color == 'red' || this.color == 'green';
+            },
+            customColor () {
+                let style = {};
+                if (this.color) {
+                    if (!this.headColorShow) {
+                        style = {
+                            'color': this.color,
+                            'border-color': this.color
+                        }
+                    }
+                }
+
+                return style;
+            },
+            contentClasses () {
+                return `${prefixCls}-item-content`;
+            }
+        }
+    }
+</script>

components/timeline/timeline.vue

@@ -0,0 +1,27 @@
+<template>
+    <ul :class="classes">
+        <slot></slot>
+    </ul>
+</template>
+<script>
+    const prefixCls = 'ivu-timeline';
+
+    export default {
+        props: {
+            pending: {
+                type: Boolean,
+                default: false
+            }
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-pending`]: this.pending
+                    }
+                ]
+            }
+        }
+    }
+</script>

dist/styles/article.css

@@ -0,0 +1 @@
+.ivu-article h1{font-size:28px}.ivu-article h2{font-size:22px}.ivu-article h3{font-size:18px}.ivu-article h4{font-size:14px}.ivu-article h5,.ivu-article h6{font-size:12px}.ivu-article blockquote{padding:5px 5px 3px 10px;line-height:1.5;border-left:4px solid #ddd;margin-bottom:20px;color:#666;font-size:14px}.ivu-article ul{padding-left:40px;list-style-type:disc}.ivu-article li{margin-bottom:5px}.ivu-article ol ul,.ivu-article ul ul{list-style-type:circle}.ivu-article p{margin:5px}

dist/styles/iview.pack.css

@@ -0,0 +1,6 @@
+/*!
+* iView
+* Web: http://www.iviewui.com
+* Github: https://github.com/iviewui/iview
+* Author: Aresn
+*/.signin{color:red}.signup{color:#f60}

dist/styles/packages/iview.pack.signin.css

@@ -0,0 +1 @@
+.signin{color:red}

dist/styles/packages/iview.pack.signup.css

@@ -0,0 +1 @@
+.signup{color:#f60}

index.js

@@ -0,0 +1,44 @@
+import Button from './components/button';
+import Icon from './components/icon';
+import Input from './components/input';
+import Switch from './components/switch';
+import Radio from './components/radio';
+import Checkbox from './components/checkbox';
+import InputNumber from './components/input-number';
+import { Row, Col } from './components/layout';
+import Page from './components/page';
+import Badge from './components/badge';
+import Tag from './components/tag';
+import Progress from './components/progress';
+import Circle from './components/circle';
+import Timeline from './components/timeline';
+import Affix from './components/affix';
+import BackTop from './components/back-top';
+import Spin from './components/spin';
+import Steps from './components/steps';
+import Breadcrumb from './components/breadcrumb';
+
+const iview = {
+    Button,
+    Icon,
+    Input,
+    Switch,
+    Radio,
+    Checkbox,
+    InputNumber,
+    Row,
+    Col,
+    Page,
+    Badge,
+    Tag,
+    Progress,
+    Circle,
+    Timeline,
+    Affix,
+    BackTop,
+    Spin,
+    Steps,
+    Breadcrumb
+};
+
+module.exports = iview;

local/components/app.vue

@@ -0,0 +1,27 @@
+<style lang="less">
+    @import "../../styles/index.less";
+    @import "../../styles/package.less";
+</style>
+<template>
+    <div>
+        <router-view></router-view>
+    </div>
+</template>
+<script>
+    module.exports = {
+        data: function() {
+            return {
+
+            }
+        },
+        ready: function() {
+            
+        },
+        beforeDestroy: function() {
+
+        },
+        methods: {
+            
+        }
+    }
+</script>

local/dist/1.chunk.js

@@ -0,0 +1,77 @@
+webpackJsonp([1],[
+/* 0 */,
+/* 1 */,
+/* 2 */,
+/* 3 */,
+/* 4 */,
+/* 5 */,
+/* 6 */,
+/* 7 */,
+/* 8 */
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_script__, __vue_template__
+	__webpack_require__(9)
+	__vue_script__ = __webpack_require__(10)
+	if (__vue_script__ &&
+	    __vue_script__.__esModule &&
+	    Object.keys(__vue_script__).length > 1) {
+	  console.warn("[vue-loader] local/routers/index.vue: named exports in *.vue files are ignored.")}
+	__vue_template__ = __webpack_require__(11)
+	module.exports = __vue_script__ || {}
+	if (module.exports.__esModule) module.exports = module.exports.default
+	if (__vue_template__) {
+	(typeof module.exports === "function" ? (module.exports.options || (module.exports.options = {})) : module.exports).template = __vue_template__
+	}
+	if (false) {(function () {  module.hot.accept()
+	  var hotAPI = require("vue-hot-reload-api")
+	  hotAPI.install(require("vue"), false)
+	  if (!hotAPI.compatible) return
+	  var id = "_v-68704ea4/index.vue"
+	  if (!module.hot.data) {
+	    hotAPI.createRecord(id, module.exports)
+	  } else {
+	    hotAPI.update(id, module.exports, __vue_template__)
+	  }
+	})()}
+
+/***/ },
+/* 9 */
+/***/ function(module, exports) {
+
+	// removed by extract-text-webpack-plugin
+
+/***/ },
+/* 10 */
+/***/ function(module, exports) {
+
+	"use strict";
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	// <style>
+	//
+	// </style>
+	// <template>
+	//     <div>welcome</div>
+	// </template>
+	// <script>
+	exports.default = {
+	    props: {},
+	    data: function data() {
+	        return {};
+	    },
+
+	    methods: {}
+	};
+	// </script>
+
+/***/ },
+/* 11 */
+/***/ function(module, exports) {
+
+	module.exports = "\n\n\n\n<div>welcome</div>\n";
+
+/***/ }
+]);

local/dist/main.js

@@ -0,0 +1,149 @@
+webpackJsonp([0],[
+/* 0 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	var _vue = __webpack_require__(1);
+
+	var _vue2 = _interopRequireDefault(_vue);
+
+	var _vueRouter = __webpack_require__(3);
+
+	var _vueRouter2 = _interopRequireDefault(_vueRouter);
+
+	var _app = __webpack_require__(4);
+
+	var _app2 = _interopRequireDefault(_app);
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+	_vue2.default.use(_vueRouter2.default);
+
+	// 开启debug模式
+	/**
+	 * Created by aresn on 16/6/20.
+	 */
+	_vue2.default.config.debug = true;
+
+	// 路由配置
+	var router = new _vueRouter2.default({
+	    history: true
+	});
+
+	router.map({
+	    '/index': {
+	        component: function component(resolve) {
+	            __webpack_require__.e/* require */(1, function(__webpack_require__) { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [__webpack_require__(8)]; (resolve.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));}.bind(this));
+	        }
+	    },
+	    '/button': {
+	        component: function component(resolve) {
+	            __webpack_require__.e/* require */(2, function(__webpack_require__) { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [__webpack_require__(12)]; (resolve.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));}.bind(this));
+	        }
+	    },
+	    '/page': {
+	        component: function component(resolve) {
+	            __webpack_require__.e/* require */(3, function(__webpack_require__) { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [__webpack_require__(137)]; (resolve.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));}.bind(this));
+	        }
+	    },
+	    '/more': {
+	        component: function component(resolve) {
+	            __webpack_require__.e/* require */(4, function(__webpack_require__) { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [__webpack_require__(141)]; (resolve.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));}.bind(this));
+	        }
+	    },
+	    '/layout': {
+	        component: function component(resolve) {
+	            __webpack_require__.e/* require */(5, function(__webpack_require__) { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [__webpack_require__(145)]; (resolve.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));}.bind(this));
+	        }
+	    },
+	    '/radio': {
+	        component: function component(resolve) {
+	            __webpack_require__.e/* require */(6, function(__webpack_require__) { var __WEBPACK_AMD_REQUIRE_ARRAY__ = [__webpack_require__(148)]; (resolve.apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__));}.bind(this));
+	        }
+	    }
+	});
+
+	router.beforeEach(function () {
+	    window.scrollTo(0, 0);
+	});
+
+	router.afterEach(function (transition) {});
+
+	router.redirect({
+	    '*': "/index"
+	});
+	router.start(_app2.default, '#app');
+
+/***/ },
+/* 1 */,
+/* 2 */,
+/* 3 */,
+/* 4 */
+/***/ function(module, exports, __webpack_require__) {
+
+	var __vue_script__, __vue_template__
+	__webpack_require__(5)
+	__vue_script__ = __webpack_require__(6)
+	if (__vue_script__ &&
+	    __vue_script__.__esModule &&
+	    Object.keys(__vue_script__).length > 1) {
+	  console.warn("[vue-loader] local/components/app.vue: named exports in *.vue files are ignored.")}
+	__vue_template__ = __webpack_require__(7)
+	module.exports = __vue_script__ || {}
+	if (module.exports.__esModule) module.exports = module.exports.default
+	if (__vue_template__) {
+	(typeof module.exports === "function" ? (module.exports.options || (module.exports.options = {})) : module.exports).template = __vue_template__
+	}
+	if (false) {(function () {  module.hot.accept()
+	  var hotAPI = require("vue-hot-reload-api")
+	  hotAPI.install(require("vue"), false)
+	  if (!hotAPI.compatible) return
+	  var id = "_v-0afa8397/app.vue"
+	  if (!module.hot.data) {
+	    hotAPI.createRecord(id, module.exports)
+	  } else {
+	    hotAPI.update(id, module.exports, __vue_template__)
+	  }
+	})()}
+
+/***/ },
+/* 5 */
+/***/ function(module, exports) {
+
+	// removed by extract-text-webpack-plugin
+
+/***/ },
+/* 6 */
+/***/ function(module, exports) {
+
+	"use strict";
+
+	// <style lang="less">
+	//     @import "../../styles/index.less";
+	//     @import "../../styles/package.less";
+	// </style>
+	// <template>
+	//     <div>
+	//         <router-view></router-view>
+	//     </div>
+	// </template>
+	// <script>
+	module.exports = {
+	    data: function data() {
+	        return {};
+	    },
+	    ready: function ready() {},
+	    beforeDestroy: function beforeDestroy() {},
+	    methods: {}
+	};
+	// </script>
+
+/***/ },
+/* 7 */
+/***/ function(module, exports) {
+
+	module.exports = "\n\n\n\n\n<div>\n    <router-view></router-view>\n</div>\n";
+
+/***/ }
+]);

local/main.js

@@ -0,0 +1,62 @@
+/**
+ * Created by aresn on 16/6/20.
+ */
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import App from './components/app.vue';
+
+Vue.use(VueRouter);
+
+// 开启debug模式
+Vue.config.debug = true;
+
+// 路由配置
+var router = new VueRouter({
+    history: true
+});
+
+router.map({
+    '/index': {
+        component: function (resolve) {
+            require(['./routers/index.vue'], resolve);
+        }
+    },
+    '/button': {
+        component: function (resolve) {
+            require(['./routers/button.vue'], resolve);
+        }
+    },
+    '/page': {
+        component: function (resolve) {
+            require(['./routers/page.vue'], resolve);
+        }
+    },
+    '/more': {
+        component: function (resolve) {
+            require(['./routers/more.vue'], resolve);
+        }
+    },
+    '/layout': {
+        component: function (resolve) {
+            require(['./routers/layout.vue'], resolve);
+        }
+    },
+    '/radio': {
+        component: function (resolve) {
+            require(['./routers/radio.vue'], resolve);
+        }
+    }
+});
+
+router.beforeEach(function () {
+    window.scrollTo(0, 0);
+});
+
+router.afterEach(function (transition) {
+
+});
+
+router.redirect({
+    '*': "/index"
+});
+router.start(App, '#app');

local/routers/button.vue

@@ -0,0 +1,147 @@
+<style>
+
+</style>
+<template>
+    <Button size="small" shape="circle" type="primary" icon="add" @click="abc">
+        <Icon type="link"></Icon>
+        链接
+    </Button>
+
+    <Button-group>
+        <Button>上一页</Button>
+        <Button>1</Button>
+        <Button>2</Button>
+        <Button>3</Button>
+        <Button>下一页</Button>
+    </Button-group>
+    {{ msg }}
+    <i-input placeholder="请输入邮箱" size="large" :value.sync="msg" @keyup.enter="abc"></i-input>
+
+    <Switch size="large" @on-change="changeSwitch">
+        <span slot="checkedItem">开</span>
+        <span slot="unCheckedItem">关</span>
+    </Switch>
+
+    <br>
+
+    <Radio @on-change="changeRadio">梁灏</Radio>
+    <Radio checked>谦翔</Radio>
+
+    <br><br><br>
+    <Radio value="谦翔">
+        谦翔
+    </Radio>
+    <Radio value="梁灏">
+        梁灏
+    </Radio>
+    <Radio value="倪斌">
+        倪斌
+    </Radio>
+    <Radio value="段模">
+        段模
+    </Radio>
+    <br><br><br>
+    <Radio-group>
+        <Radio value="谦翔">
+            谦翔
+        </Radio>
+        <Radio value="梁灏">
+            梁灏
+        </Radio>
+        <Radio value="倪斌">
+            倪斌
+        </Radio>
+        <Radio value="段模">
+            段模
+        </Radio>
+    </Radio-group>
+    <br><br><br>
+    <Checkbox-group :model="checkbox" @on-change="groupChange">
+        <Checkbox value="梁灏">梁灏</Checkbox>
+        <Checkbox value="段模">段模</Checkbox>
+        <Checkbox value="倪斌">倪斌</Checkbox>
+    </Checkbox-group>
+    <br><br><br>
+    <div @click="changeCB">切换名称数据</div>
+    {{ checkbox | json }}
+    <br><br><br>
+    <Checkbox :checked.sync="singleRadio" @on-change="singleChange">梁灏</Checkbox>
+    <br>
+    {{ singleRadio }}
+    <div @click="singleRadio = !singleRadio">切换单个名称数据</div>
+    <br><br><br>
+    ------------------------------
+    <Input-number :step="1.2" :value="1"></Input-number>
+    {{ inumber }}
+    <br><br><br>
+    <Row type="flex" align="top" justify="end" class="hello world">
+        <i-col span="8" offset="2" class="nihao shijie">1</i-col>
+        <i-col span="8" push="3">2</i-col>
+        <i-col span="8" order="2">3</i-col>
+    </Row>
+
+    <br><br><br>
+
+    <Page :current="1" :total="100" simple></Page>
+</template>
+<script>
+    import { Button, Icon, Input, Switch, Radio, Checkbox, InputNumber, Row, Col, Page } from 'iview';
+    const ButtonGroup = Button.Group;
+    const RadioGroup = Radio.Group;
+    const CheckboxGroup = Checkbox.Group;
+
+    export default {
+        components: {
+            Button,
+            ButtonGroup,
+            Icon,
+            iInput: Input,
+            Switch,
+            Radio,
+            RadioGroup,
+            Checkbox,
+            CheckboxGroup,
+            InputNumber,
+            Row,
+            iCol: Col,
+            Page
+        },
+        props: {
+        
+        },
+        data () {
+            return {
+                msg: 123,
+                radio: '梁灏',
+                checkbox: ['倪斌'],
+                inumber: 5,
+                singleRadio: true
+            }        
+        },
+        ready () {
+            setTimeout(() => {
+//                this.checkbox = ['倪斌', '梁灏'];
+            }, 2000);
+        },
+        methods: {
+            abc() {
+                console.log(123);
+            },
+            changeSwitch (data) {
+                console.log(data);
+            },
+            changeRadio (data) {
+                console.log(data);
+            },
+            changeCB () {
+                this.checkbox = ['梁灏', '段模'];
+            },
+            groupChange (data) {
+//                console.log(data);
+            },
+            singleChange (data) {
+//                console.log(data);
+            }
+        }
+    }
+</script>

local/routers/index.vue

@@ -0,0 +1,21 @@
+<style>
+
+</style>
+<template>
+    <div>welcome</div>
+</template>
+<script>
+    export default {
+        props: {
+        
+        },
+        data () {
+            return {
+            
+            }        
+        },
+        methods: {
+        
+        }
+    }
+</script>

local/routers/layout.vue

@@ -0,0 +1,34 @@
+<template>
+    <Row>
+        <i-col span="4">
+            我在左边
+        </i-col>
+        <i-col span="20">
+            我在右边
+        </i-col>
+    </Row>
+</template>
+<script>
+    import { Row, Col } from 'iview';
+
+    export default {
+        components: {
+            Row,
+            iCol: Col
+        },
+        props: {
+        
+        },
+        data () {
+            return {
+            
+            }
+        },
+        computed: {
+        
+        },
+        methods: {
+        
+        }
+    }
+</script>

local/routers/more.vue

@@ -0,0 +1,133 @@
+<style scoped>
+    body{
+        padding: 50px;
+        height: 2000px;
+    }
+    .example-badge{
+        width: 42px;
+        height: 42px;
+        border-radius: 6px;
+        background: #eee;
+        display: inline-block;
+    }
+</style>
+<template>
+
+    <Badge count="10">
+        <a class="example-badge"></a>
+    </Badge>
+
+    <Tag color="green" closable @on-close="closed">管理员</Tag>
+    <Progress :percent="50" status="active" :stroke-width="20">
+
+    </Progress>
+
+    <Circle :percent="p">
+        {{p}}%
+    </Circle>
+    <br><br>
+    <Timeline pending>
+        <Timeline-item color="red">发布3.0版本</Timeline-item>
+        <Timeline-item color="green">
+            <Icon type="time" slot="dot"></Icon>
+            发布2.0版本
+        </Timeline-item>
+        <Timeline-item color="#ff6600">发布1.0版本</Timeline-item>
+        <Timeline-item>发布里程碑版本</Timeline-item>
+    </Timeline>
+    <br><br>
+    <Affix :offset-top="50" @on-change="affixChange">
+        <Button>固定的图钉</Button>
+    </Affix>
+    <Back-top @on-click="backtop">
+
+    </Back-top>
+
+    <div style="width: 200px;height: 100px;border:1px solid #b2b2b2;position:relative">
+        <!--<Spin size="large" fix>加载中...</Spin>-->
+        <Spin size="large" fix v-if="spinShow">加载中...</Spin>
+    </div>
+    <div @click="spinShow = !spinShow">消失</div>
+    <br><br>
+
+    <Button @click="nextStep">下一步</Button>
+    <Button @click="step_status = 'error'">步骤3切换为错误</Button>
+    <Button @click="step_process = 'error'">切换steps状态为error</Button>
+    <Breadcrumb separator="<b>=></b>">
+        <Breadcrumb-item href="/index">首页</Breadcrumb-item>
+        <Breadcrumb-item href="/my">我的</Breadcrumb-item>
+        <Breadcrumb-item>
+            <Icon type="photo"></Icon>照片
+        </Breadcrumb-item>
+    </Breadcrumb>
+    <br>
+    <Steps :current="1" status="error">
+        <Step title="已完成" content="这里是该步骤的描述信息"></Step>
+        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
+        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
+        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
+    </Steps>
+    <Button @click="testStatus = 'process'">change Status</Button>
+</template>
+<script>
+    import { Badge, Tag, Progress, Circle, Timeline, Icon, Affix, Button, BackTop, Spin, Steps, Breadcrumb} from 'iview';
+    const TimelineItem = Timeline.Item;
+    const Step = Steps.Step;
+    const BreadcrumbItem = Breadcrumb.Item;
+
+    export default {
+        components: {
+            Badge,
+            Tag,
+            Progress,
+            Circle,
+            Timeline,
+            TimelineItem,
+            Icon,
+            Affix,
+            Button,
+            BackTop,
+            Spin,
+            Steps,
+            Step,
+            Breadcrumb,
+            BreadcrumbItem
+        },
+        props: {
+        
+        },
+        data () {
+            return {
+                total: 512,
+                p: 50,
+                step_current: 0,
+                step_status: 'wait',
+                step_process: 'process',
+                spinShow: true,
+                testStatus: 'wait'
+            }
+        },
+        computed: {
+        
+        },
+        methods: {
+            closed (e) {
+                console.log(e)
+            },
+            affixChange (status) {
+                console.log(status)
+            },
+            backtop () {
+                console.log('toppp')
+            },
+            nextStep () {
+                this.step_current += 1;
+            }
+        },
+        ready () {
+            setTimeout(() => {
+                this.p = 60;
+            }, 1000)
+        }
+    }
+</script>

local/routers/page.vue

@@ -0,0 +1,36 @@
+<style>
+    body{
+        padding: 100px;
+    }
+    .ivu-page-item-active{
+        color: #f60;
+    }
+</style>
+<template>
+    <Page :current="1" :total="total" show-sizer show-total show-elevator :page-size="10" simple @on-change="setPage"></Page>
+</template>
+<script>
+    import { Page } from 'iview';
+
+    export default {
+        components: {
+            Page
+        },
+        props: {
+        
+        },
+        data () {
+            return {
+                total: 512
+            }
+        },
+        computed: {
+        
+        },
+        methods: {
+            setPage (page) {
+                console.log(page)
+            }
+        }
+    }
+</script>

local/routers/radio.vue

@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <Radio :checked.sync="radio">梁灏</Radio>
+        {{ radio | json }}
+        <div @click="radio = false">单项切换</div>
+        <br><br><br>
+        <Radio-group :model.sync="radioGroup" size="large" type="button" @on-change="changeGroup">
+            <Radio value="梁灏"></Radio>
+            <Radio value="段模"></Radio>
+            <Radio value="倪斌"></Radio>
+        </Radio-group>
+        {{ radioGroup | json }}
+        <div @click="radioGroup = '梁灏'">多项切换</div>
+    </div>
+</template>
+<script>
+    import { Radio } from 'iview';
+
+    const RadioGroup = Radio.Group;
+
+    export default {
+        components: {
+            Radio,
+            RadioGroup
+        },
+        props: {
+        
+        },
+        data () {
+            return {
+                radio: true,
+                radioGroup: '段模'
+            }
+        },
+        computed: {
+        
+        },
+        methods: {
+            changeGroup (data) {
+                console.log(data);
+            }
+        }
+    }
+</script>

local/template/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>Webpack App</title>
+</head>
+<body>
+    <div id="app"></div>
+</body>
+</html> 

package.json

@@ -0,0 +1,65 @@
+{
+  "name": "iview",
+  "version": "0.0.2",
+  "title": "iView",
+  "description": "An UI components Library with Vue.js",
+  "homepage": "http://www.iviewui.com",
+  "keywords": [
+    "iview",
+    "vue",
+    "vue.js",
+    "component",
+    "components",
+    "ui",
+    "framework"
+  ],
+  "main": "index.js",
+  "scripts": {
+    "init": "webpack --progress --config build/webpack.config.js",
+    "dev": "webpack-dev-server --inline --hot --compress --history-api-fallback --port 8081 --config build/webpack.config.js",
+    "build": "gulp --gulpfile build/build-style.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/iviewui/iview"
+  },
+  "author": "Aresn",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/iviewui/iview/issues"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "autoprefixer-loader": "^2.0.0",
+    "babel": "^6.3.13",
+    "babel-core": "^6.11.4",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-transform-runtime": "^6.12.0",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-runtime": "^6.11.6",
+    "css-loader": "^0.23.1",
+    "eslint": "^2.5.3",
+    "eslint-friendly-formatter": "^2.0.6",
+    "eslint-loader": "^1.3.0",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.8.5",
+    "gulp": "^3.9.1",
+    "gulp-concat": "^2.6.0",
+    "gulp-less": "^3.1.0",
+    "gulp-minify-css": "^1.2.4",
+    "gulp-rename": "^1.2.2",
+    "html-loader": "^0.3.0",
+    "html-webpack-plugin": "^2.22.0",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.3",
+    "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
+    "vue": "^1.0.26",
+    "vue-hot-reload-api": "^1.3.3",
+    "vue-html-loader": "^1.2.3",
+    "vue-loader": "^8.5.3",
+    "vue-router": "^0.7.13",
+    "vue-style-loader": "^1.0.0",
+    "webpack": "^1.13.1"
+  }
+}

styles/README.md

@@ -0,0 +1,11 @@
+# 样式库说明
+
+## 目录
+
+|-- components  (组件样式)
+
+|-- common  (全局样式)
+
+|-- packages  (套装)
+
+|-- themes  (皮肤)

styles/article/index.less

@@ -0,0 +1,44 @@
+.ivu-article {
+    h1{
+        font-size: 28px;
+    }
+    h2{
+        font-size: 22px;
+    }
+    h3{
+        font-size: 18px;
+    }
+    h4{
+        font-size: 14px;
+    }
+    h5{
+        font-size: 12px;
+    }
+    h6{
+        font-size: 12px;
+    }
+
+    blockquote{
+        padding: 5px 5px 3px 10px;
+        line-height: 1.5;
+        border-left: 4px solid #ddd;
+        margin-bottom: 20px;
+        color: #666;
+        font-size: 14px;
+    }
+
+    ul{
+        padding-left: 40px;
+        list-style-type: disc;
+    }
+    li{
+        margin-bottom: 5px;
+    }
+    ul ul, ol ul{
+        list-style-type: circle;
+    }
+
+    p{
+        margin: 5px;
+    }
+}

styles/common/base.less

@@ -0,0 +1,77 @@
+@import "normalize";
+
+* {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: @font-family;
+    font-size: @font-size-base;
+    line-height: @line-height-base;
+    color: @text-color;
+    background-color: @body-background;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+    margin: 0;
+    padding: 0;
+}
+
+button, input, select, textarea {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+}
+
+ul,
+ol {
+    list-style: none;
+}
+
+input::-ms-clear, input::-ms-reveal {
+    display: none;
+}
+
+a {
+    color: @link-color;
+    background: transparent;
+    text-decoration: none;
+    outline: none;
+    cursor: pointer;
+    transition: color @transition-time ease;
+
+    &:hover {
+        color: @link-hover-color;
+    }
+
+    &:active {
+        color: @link-active-color;
+    }
+
+    &:active,
+    &:hover {
+        outline: 0;
+        text-decoration: none;
+    }
+
+    &[disabled] {
+        color: #ccc;
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+}
+
+code,
+kbd,
+pre,
+samp {
+    font-family: @code-family;
+}

styles/common/iconfont/_ionicons-font.less

@@ -0,0 +1,27 @@
+// Ionicons Font Path
+// --------------------------
+
+@font-face {
+ font-family: @ionicons-font-family;
+ src:url("@{ionicons-font-path}/ionicons.eot?v=@{ionicons-version}");
+ src:url("@{ionicons-font-path}/ionicons.eot?v=@{ionicons-version}#iefix") format("embedded-opentype"),
+  url("@{ionicons-font-path}/ionicons.ttf?v=@{ionicons-version}") format("truetype"),
+  url("@{ionicons-font-path}/ionicons.woff?v=@{ionicons-version}") format("woff"),
+  url("@{ionicons-font-path}/ionicons.svg?v=@{ionicons-version}#Ionicons") format("svg");
+ font-weight: normal;
+ font-style: normal;
+}
+
+.ivu-icon {
+  display: inline-block;
+  font-family: @ionicons-font-family;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  text-rendering: auto;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

styles/common/iconfont/_ionicons-variables.less

@@ -0,0 +1,747 @@
+/*
+Ionicons, v2.0.0
+Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
+https://twitter.com/benjsperry  https://twitter.com/ionicframework
+MIT License: https://github.com/driftyco/ionicons
+*/
+// Ionicons Variables
+// --------------------------
+
+@ionicons-font-path: "./fonts";
+@ionicons-font-family: "Ionicons";
+@ionicons-version: "2.0.0";
+@ionicons-prefix: ivu-icon-;
+
+@ionicon-var-alert: "\f101";
+@ionicon-var-alert-circled: "\f100";
+@ionicon-var-android-add: "\f2c7";
+@ionicon-var-android-add-circle: "\f359";
+@ionicon-var-android-alarm-clock: "\f35a";
+@ionicon-var-android-alert: "\f35b";
+@ionicon-var-android-apps: "\f35c";
+@ionicon-var-android-archive: "\f2c9";
+@ionicon-var-android-arrow-back: "\f2ca";
+@ionicon-var-android-arrow-down: "\f35d";
+@ionicon-var-android-arrow-dropdown: "\f35f";
+@ionicon-var-android-arrow-dropdown-circle: "\f35e";
+@ionicon-var-android-arrow-dropleft: "\f361";
+@ionicon-var-android-arrow-dropleft-circle: "\f360";
+@ionicon-var-android-arrow-dropright: "\f363";
+@ionicon-var-android-arrow-dropright-circle: "\f362";
+@ionicon-var-android-arrow-dropup: "\f365";
+@ionicon-var-android-arrow-dropup-circle: "\f364";
+@ionicon-var-android-arrow-forward: "\f30f";
+@ionicon-var-android-arrow-up: "\f366";
+@ionicon-var-android-attach: "\f367";
+@ionicon-var-android-bar: "\f368";
+@ionicon-var-android-bicycle: "\f369";
+@ionicon-var-android-boat: "\f36a";
+@ionicon-var-android-bookmark: "\f36b";
+@ionicon-var-android-bulb: "\f36c";
+@ionicon-var-android-bus: "\f36d";
+@ionicon-var-android-calendar: "\f2d1";
+@ionicon-var-android-call: "\f2d2";
+@ionicon-var-android-camera: "\f2d3";
+@ionicon-var-android-cancel: "\f36e";
+@ionicon-var-android-car: "\f36f";
+@ionicon-var-android-cart: "\f370";
+@ionicon-var-android-chat: "\f2d4";
+@ionicon-var-android-checkbox: "\f374";
+@ionicon-var-android-checkbox-blank: "\f371";
+@ionicon-var-android-checkbox-outline: "\f373";
+@ionicon-var-android-checkbox-outline-blank: "\f372";
+@ionicon-var-android-checkmark-circle: "\f375";
+@ionicon-var-android-clipboard: "\f376";
+@ionicon-var-android-close: "\f2d7";
+@ionicon-var-android-cloud: "\f37a";
+@ionicon-var-android-cloud-circle: "\f377";
+@ionicon-var-android-cloud-done: "\f378";
+@ionicon-var-android-cloud-outline: "\f379";
+@ionicon-var-android-color-palette: "\f37b";
+@ionicon-var-android-compass: "\f37c";
+@ionicon-var-android-contact: "\f2d8";
+@ionicon-var-android-contacts: "\f2d9";
+@ionicon-var-android-contract: "\f37d";
+@ionicon-var-android-create: "\f37e";
+@ionicon-var-android-delete: "\f37f";
+@ionicon-var-android-desktop: "\f380";
+@ionicon-var-android-document: "\f381";
+@ionicon-var-android-done: "\f383";
+@ionicon-var-android-done-all: "\f382";
+@ionicon-var-android-download: "\f2dd";
+@ionicon-var-android-drafts: "\f384";
+@ionicon-var-android-exit: "\f385";
+@ionicon-var-android-expand: "\f386";
+@ionicon-var-android-favorite: "\f388";
+@ionicon-var-android-favorite-outline: "\f387";
+@ionicon-var-android-film: "\f389";
+@ionicon-var-android-folder: "\f2e0";
+@ionicon-var-android-folder-open: "\f38a";
+@ionicon-var-android-funnel: "\f38b";
+@ionicon-var-android-globe: "\f38c";
+@ionicon-var-android-hand: "\f2e3";
+@ionicon-var-android-hangout: "\f38d";
+@ionicon-var-android-happy: "\f38e";
+@ionicon-var-android-home: "\f38f";
+@ionicon-var-android-image: "\f2e4";
+@ionicon-var-android-laptop: "\f390";
+@ionicon-var-android-list: "\f391";
+@ionicon-var-android-locate: "\f2e9";
+@ionicon-var-android-lock: "\f392";
+@ionicon-var-android-mail: "\f2eb";
+@ionicon-var-android-map: "\f393";
+@ionicon-var-android-menu: "\f394";
+@ionicon-var-android-microphone: "\f2ec";
+@ionicon-var-android-microphone-off: "\f395";
+@ionicon-var-android-more-horizontal: "\f396";
+@ionicon-var-android-more-vertical: "\f397";
+@ionicon-var-android-navigate: "\f398";
+@ionicon-var-android-notifications: "\f39b";
+@ionicon-var-android-notifications-none: "\f399";
+@ionicon-var-android-notifications-off: "\f39a";
+@ionicon-var-android-open: "\f39c";
+@ionicon-var-android-options: "\f39d";
+@ionicon-var-android-people: "\f39e";
+@ionicon-var-android-person: "\f3a0";
+@ionicon-var-android-person-add: "\f39f";
+@ionicon-var-android-phone-landscape: "\f3a1";
+@ionicon-var-android-phone-portrait: "\f3a2";
+@ionicon-var-android-pin: "\f3a3";
+@ionicon-var-android-plane: "\f3a4";
+@ionicon-var-android-playstore: "\f2f0";
+@ionicon-var-android-print: "\f3a5";
+@ionicon-var-android-radio-button-off: "\f3a6";
+@ionicon-var-android-radio-button-on: "\f3a7";
+@ionicon-var-android-refresh: "\f3a8";
+@ionicon-var-android-remove: "\f2f4";
+@ionicon-var-android-remove-circle: "\f3a9";
+@ionicon-var-android-restaurant: "\f3aa";
+@ionicon-var-android-sad: "\f3ab";
+@ionicon-var-android-search: "\f2f5";
+@ionicon-var-android-send: "\f2f6";
+@ionicon-var-android-settings: "\f2f7";
+@ionicon-var-android-share: "\f2f8";
+@ionicon-var-android-share-alt: "\f3ac";
+@ionicon-var-android-star: "\f2fc";
+@ionicon-var-android-star-half: "\f3ad";
+@ionicon-var-android-star-outline: "\f3ae";
+@ionicon-var-android-stopwatch: "\f2fd";
+@ionicon-var-android-subway: "\f3af";
+@ionicon-var-android-sunny: "\f3b0";
+@ionicon-var-android-sync: "\f3b1";
+@ionicon-var-android-textsms: "\f3b2";
+@ionicon-var-android-time: "\f3b3";
+@ionicon-var-android-train: "\f3b4";
+@ionicon-var-android-unlock: "\f3b5";
+@ionicon-var-android-upload: "\f3b6";
+@ionicon-var-android-volume-down: "\f3b7";
+@ionicon-var-android-volume-mute: "\f3b8";
+@ionicon-var-android-volume-off: "\f3b9";
+@ionicon-var-android-volume-up: "\f3ba";
+@ionicon-var-android-walk: "\f3bb";
+@ionicon-var-android-warning: "\f3bc";
+@ionicon-var-android-watch: "\f3bd";
+@ionicon-var-android-wifi: "\f305";
+@ionicon-var-aperture: "\f313";
+@ionicon-var-archive: "\f102";
+@ionicon-var-arrow-down-a: "\f103";
+@ionicon-var-arrow-down-b: "\f104";
+@ionicon-var-arrow-down-c: "\f105";
+@ionicon-var-arrow-expand: "\f25e";
+@ionicon-var-arrow-graph-down-left: "\f25f";
+@ionicon-var-arrow-graph-down-right: "\f260";
+@ionicon-var-arrow-graph-up-left: "\f261";
+@ionicon-var-arrow-graph-up-right: "\f262";
+@ionicon-var-arrow-left-a: "\f106";
+@ionicon-var-arrow-left-b: "\f107";
+@ionicon-var-arrow-left-c: "\f108";
+@ionicon-var-arrow-move: "\f263";
+@ionicon-var-arrow-resize: "\f264";
+@ionicon-var-arrow-return-left: "\f265";
+@ionicon-var-arrow-return-right: "\f266";
+@ionicon-var-arrow-right-a: "\f109";
+@ionicon-var-arrow-right-b: "\f10a";
+@ionicon-var-arrow-right-c: "\f10b";
+@ionicon-var-arrow-shrink: "\f267";
+@ionicon-var-arrow-swap: "\f268";
+@ionicon-var-arrow-up-a: "\f10c";
+@ionicon-var-arrow-up-b: "\f10d";
+@ionicon-var-arrow-up-c: "\f10e";
+@ionicon-var-asterisk: "\f314";
+@ionicon-var-at: "\f10f";
+@ionicon-var-backspace: "\f3bf";
+@ionicon-var-backspace-outline: "\f3be";
+@ionicon-var-bag: "\f110";
+@ionicon-var-battery-charging: "\f111";
+@ionicon-var-battery-empty: "\f112";
+@ionicon-var-battery-full: "\f113";
+@ionicon-var-battery-half: "\f114";
+@ionicon-var-battery-low: "\f115";
+@ionicon-var-beaker: "\f269";
+@ionicon-var-beer: "\f26a";
+@ionicon-var-bluetooth: "\f116";
+@ionicon-var-bonfire: "\f315";
+@ionicon-var-bookmark: "\f26b";
+@ionicon-var-bowtie: "\f3c0";
+@ionicon-var-briefcase: "\f26c";
+@ionicon-var-bug: "\f2be";
+@ionicon-var-calculator: "\f26d";
+@ionicon-var-calendar: "\f117";
+@ionicon-var-camera: "\f118";
+@ionicon-var-card: "\f119";
+@ionicon-var-cash: "\f316";
+@ionicon-var-chatbox: "\f11b";
+@ionicon-var-chatbox-working: "\f11a";
+@ionicon-var-chatboxes: "\f11c";
+@ionicon-var-chatbubble: "\f11e";
+@ionicon-var-chatbubble-working: "\f11d";
+@ionicon-var-chatbubbles: "\f11f";
+@ionicon-var-checkmark: "\f122";
+@ionicon-var-checkmark-circled: "\f120";
+@ionicon-var-checkmark-round: "\f121";
+@ionicon-var-chevron-down: "\f123";
+@ionicon-var-chevron-left: "\f124";
+@ionicon-var-chevron-right: "\f125";
+@ionicon-var-chevron-up: "\f126";
+@ionicon-var-clipboard: "\f127";
+@ionicon-var-clock: "\f26e";
+@ionicon-var-close: "\f12a";
+@ionicon-var-close-circled: "\f128";
+@ionicon-var-close-round: "\f129";
+@ionicon-var-closed-captioning: "\f317";
+@ionicon-var-cloud: "\f12b";
+@ionicon-var-code: "\f271";
+@ionicon-var-code-download: "\f26f";
+@ionicon-var-code-working: "\f270";
+@ionicon-var-coffee: "\f272";
+@ionicon-var-compass: "\f273";
+@ionicon-var-compose: "\f12c";
+@ionicon-var-connection-bars: "\f274";
+@ionicon-var-contrast: "\f275";
+@ionicon-var-crop: "\f3c1";
+@ionicon-var-cube: "\f318";
+@ionicon-var-disc: "\f12d";
+@ionicon-var-document: "\f12f";
+@ionicon-var-document-text: "\f12e";
+@ionicon-var-drag: "\f130";
+@ionicon-var-earth: "\f276";
+@ionicon-var-easel: "\f3c2";
+@ionicon-var-edit: "\f2bf";
+@ionicon-var-egg: "\f277";
+@ionicon-var-eject: "\f131";
+@ionicon-var-email: "\f132";
+@ionicon-var-email-unread: "\f3c3";
+@ionicon-var-erlenmeyer-flask: "\f3c5";
+@ionicon-var-erlenmeyer-flask-bubbles: "\f3c4";
+@ionicon-var-eye: "\f133";
+@ionicon-var-eye-disabled: "\f306";
+@ionicon-var-female: "\f278";
+@ionicon-var-filing: "\f134";
+@ionicon-var-film-marker: "\f135";
+@ionicon-var-fireball: "\f319";
+@ionicon-var-flag: "\f279";
+@ionicon-var-flame: "\f31a";
+@ionicon-var-flash: "\f137";
+@ionicon-var-flash-off: "\f136";
+@ionicon-var-folder: "\f139";
+@ionicon-var-fork: "\f27a";
+@ionicon-var-fork-repo: "\f2c0";
+@ionicon-var-forward: "\f13a";
+@ionicon-var-funnel: "\f31b";
+@ionicon-var-gear-a: "\f13d";
+@ionicon-var-gear-b: "\f13e";
+@ionicon-var-grid: "\f13f";
+@ionicon-var-hammer: "\f27b";
+@ionicon-var-happy: "\f31c";
+@ionicon-var-happy-outline: "\f3c6";
+@ionicon-var-headphone: "\f140";
+@ionicon-var-heart: "\f141";
+@ionicon-var-heart-broken: "\f31d";
+@ionicon-var-help: "\f143";
+@ionicon-var-help-buoy: "\f27c";
+@ionicon-var-help-circled: "\f142";
+@ionicon-var-home: "\f144";
+@ionicon-var-icecream: "\f27d";
+@ionicon-var-image: "\f147";
+@ionicon-var-images: "\f148";
+@ionicon-var-information: "\f14a";
+@ionicon-var-information-circled: "\f149";
+@ionicon-var-ionic: "\f14b";
+@ionicon-var-ios-alarm: "\f3c8";
+@ionicon-var-ios-alarm-outline: "\f3c7";
+@ionicon-var-ios-albums: "\f3ca";
+@ionicon-var-ios-albums-outline: "\f3c9";
+@ionicon-var-ios-americanfootball: "\f3cc";
+@ionicon-var-ios-americanfootball-outline: "\f3cb";
+@ionicon-var-ios-analytics: "\f3ce";
+@ionicon-var-ios-analytics-outline: "\f3cd";
+@ionicon-var-ios-arrow-back: "\f3cf";
+@ionicon-var-ios-arrow-down: "\f3d0";
+@ionicon-var-ios-arrow-forward: "\f3d1";
+@ionicon-var-ios-arrow-left: "\f3d2";
+@ionicon-var-ios-arrow-right: "\f3d3";
+@ionicon-var-ios-arrow-thin-down: "\f3d4";
+@ionicon-var-ios-arrow-thin-left: "\f3d5";
+@ionicon-var-ios-arrow-thin-right: "\f3d6";
+@ionicon-var-ios-arrow-thin-up: "\f3d7";
+@ionicon-var-ios-arrow-up: "\f3d8";
+@ionicon-var-ios-at: "\f3da";
+@ionicon-var-ios-at-outline: "\f3d9";
+@ionicon-var-ios-barcode: "\f3dc";
+@ionicon-var-ios-barcode-outline: "\f3db";
+@ionicon-var-ios-baseball: "\f3de";
+@ionicon-var-ios-baseball-outline: "\f3dd";
+@ionicon-var-ios-basketball: "\f3e0";
+@ionicon-var-ios-basketball-outline: "\f3df";
+@ionicon-var-ios-bell: "\f3e2";
+@ionicon-var-ios-bell-outline: "\f3e1";
+@ionicon-var-ios-body: "\f3e4";
+@ionicon-var-ios-body-outline: "\f3e3";
+@ionicon-var-ios-bolt: "\f3e6";
+@ionicon-var-ios-bolt-outline: "\f3e5";
+@ionicon-var-ios-book: "\f3e8";
+@ionicon-var-ios-book-outline: "\f3e7";
+@ionicon-var-ios-bookmarks: "\f3ea";
+@ionicon-var-ios-bookmarks-outline: "\f3e9";
+@ionicon-var-ios-box: "\f3ec";
+@ionicon-var-ios-box-outline: "\f3eb";
+@ionicon-var-ios-briefcase: "\f3ee";
+@ionicon-var-ios-briefcase-outline: "\f3ed";
+@ionicon-var-ios-browsers: "\f3f0";
+@ionicon-var-ios-browsers-outline: "\f3ef";
+@ionicon-var-ios-calculator: "\f3f2";
+@ionicon-var-ios-calculator-outline: "\f3f1";
+@ionicon-var-ios-calendar: "\f3f4";
+@ionicon-var-ios-calendar-outline: "\f3f3";
+@ionicon-var-ios-camera: "\f3f6";
+@ionicon-var-ios-camera-outline: "\f3f5";
+@ionicon-var-ios-cart: "\f3f8";
+@ionicon-var-ios-cart-outline: "\f3f7";
+@ionicon-var-ios-chatboxes: "\f3fa";
+@ionicon-var-ios-chatboxes-outline: "\f3f9";
+@ionicon-var-ios-chatbubble: "\f3fc";
+@ionicon-var-ios-chatbubble-outline: "\f3fb";
+@ionicon-var-ios-checkmark: "\f3ff";
+@ionicon-var-ios-checkmark-empty: "\f3fd";
+@ionicon-var-ios-checkmark-outline: "\f3fe";
+@ionicon-var-ios-circle-filled: "\f400";
+@ionicon-var-ios-circle-outline: "\f401";
+@ionicon-var-ios-clock: "\f403";
+@ionicon-var-ios-clock-outline: "\f402";
+@ionicon-var-ios-close: "\f406";
+@ionicon-var-ios-close-empty: "\f404";
+@ionicon-var-ios-close-outline: "\f405";
+@ionicon-var-ios-cloud: "\f40c";
+@ionicon-var-ios-cloud-download: "\f408";
+@ionicon-var-ios-cloud-download-outline: "\f407";
+@ionicon-var-ios-cloud-outline: "\f409";
+@ionicon-var-ios-cloud-upload: "\f40b";
+@ionicon-var-ios-cloud-upload-outline: "\f40a";
+@ionicon-var-ios-cloudy: "\f410";
+@ionicon-var-ios-cloudy-night: "\f40e";
+@ionicon-var-ios-cloudy-night-outline: "\f40d";
+@ionicon-var-ios-cloudy-outline: "\f40f";
+@ionicon-var-ios-cog: "\f412";
+@ionicon-var-ios-cog-outline: "\f411";
+@ionicon-var-ios-color-filter: "\f414";
+@ionicon-var-ios-color-filter-outline: "\f413";
+@ionicon-var-ios-color-wand: "\f416";
+@ionicon-var-ios-color-wand-outline: "\f415";
+@ionicon-var-ios-compose: "\f418";
+@ionicon-var-ios-compose-outline: "\f417";
+@ionicon-var-ios-contact: "\f41a";
+@ionicon-var-ios-contact-outline: "\f419";
+@ionicon-var-ios-copy: "\f41c";
+@ionicon-var-ios-copy-outline: "\f41b";
+@ionicon-var-ios-crop: "\f41e";
+@ionicon-var-ios-crop-strong: "\f41d";
+@ionicon-var-ios-download: "\f420";
+@ionicon-var-ios-download-outline: "\f41f";
+@ionicon-var-ios-drag: "\f421";
+@ionicon-var-ios-email: "\f423";
+@ionicon-var-ios-email-outline: "\f422";
+@ionicon-var-ios-eye: "\f425";
+@ionicon-var-ios-eye-outline: "\f424";
+@ionicon-var-ios-fastforward: "\f427";
+@ionicon-var-ios-fastforward-outline: "\f426";
+@ionicon-var-ios-filing: "\f429";
+@ionicon-var-ios-filing-outline: "\f428";
+@ionicon-var-ios-film: "\f42b";
+@ionicon-var-ios-film-outline: "\f42a";
+@ionicon-var-ios-flag: "\f42d";
+@ionicon-var-ios-flag-outline: "\f42c";
+@ionicon-var-ios-flame: "\f42f";
+@ionicon-var-ios-flame-outline: "\f42e";
+@ionicon-var-ios-flask: "\f431";
+@ionicon-var-ios-flask-outline: "\f430";
+@ionicon-var-ios-flower: "\f433";
+@ionicon-var-ios-flower-outline: "\f432";
+@ionicon-var-ios-folder: "\f435";
+@ionicon-var-ios-folder-outline: "\f434";
+@ionicon-var-ios-football: "\f437";
+@ionicon-var-ios-football-outline: "\f436";
+@ionicon-var-ios-game-controller-a: "\f439";
+@ionicon-var-ios-game-controller-a-outline: "\f438";
+@ionicon-var-ios-game-controller-b: "\f43b";
+@ionicon-var-ios-game-controller-b-outline: "\f43a";
+@ionicon-var-ios-gear: "\f43d";
+@ionicon-var-ios-gear-outline: "\f43c";
+@ionicon-var-ios-glasses: "\f43f";
+@ionicon-var-ios-glasses-outline: "\f43e";
+@ionicon-var-ios-grid-view: "\f441";
+@ionicon-var-ios-grid-view-outline: "\f440";
+@ionicon-var-ios-heart: "\f443";
+@ionicon-var-ios-heart-outline: "\f442";
+@ionicon-var-ios-help: "\f446";
+@ionicon-var-ios-help-empty: "\f444";
+@ionicon-var-ios-help-outline: "\f445";
+@ionicon-var-ios-home: "\f448";
+@ionicon-var-ios-home-outline: "\f447";
+@ionicon-var-ios-infinite: "\f44a";
+@ionicon-var-ios-infinite-outline: "\f449";
+@ionicon-var-ios-information: "\f44d";
+@ionicon-var-ios-information-empty: "\f44b";
+@ionicon-var-ios-information-outline: "\f44c";
+@ionicon-var-ios-ionic-outline: "\f44e";
+@ionicon-var-ios-keypad: "\f450";
+@ionicon-var-ios-keypad-outline: "\f44f";
+@ionicon-var-ios-lightbulb: "\f452";
+@ionicon-var-ios-lightbulb-outline: "\f451";
+@ionicon-var-ios-list: "\f454";
+@ionicon-var-ios-list-outline: "\f453";
+@ionicon-var-ios-location: "\f456";
+@ionicon-var-ios-location-outline: "\f455";
+@ionicon-var-ios-locked: "\f458";
+@ionicon-var-ios-locked-outline: "\f457";
+@ionicon-var-ios-loop: "\f45a";
+@ionicon-var-ios-loop-strong: "\f459";
+@ionicon-var-ios-medical: "\f45c";
+@ionicon-var-ios-medical-outline: "\f45b";
+@ionicon-var-ios-medkit: "\f45e";
+@ionicon-var-ios-medkit-outline: "\f45d";
+@ionicon-var-ios-mic: "\f461";
+@ionicon-var-ios-mic-off: "\f45f";
+@ionicon-var-ios-mic-outline: "\f460";
+@ionicon-var-ios-minus: "\f464";
+@ionicon-var-ios-minus-empty: "\f462";
+@ionicon-var-ios-minus-outline: "\f463";
+@ionicon-var-ios-monitor: "\f466";
+@ionicon-var-ios-monitor-outline: "\f465";
+@ionicon-var-ios-moon: "\f468";
+@ionicon-var-ios-moon-outline: "\f467";
+@ionicon-var-ios-more: "\f46a";
+@ionicon-var-ios-more-outline: "\f469";
+@ionicon-var-ios-musical-note: "\f46b";
+@ionicon-var-ios-musical-notes: "\f46c";
+@ionicon-var-ios-navigate: "\f46e";
+@ionicon-var-ios-navigate-outline: "\f46d";
+@ionicon-var-ios-nutrition: "\f470";
+@ionicon-var-ios-nutrition-outline: "\f46f";
+@ionicon-var-ios-paper: "\f472";
+@ionicon-var-ios-paper-outline: "\f471";
+@ionicon-var-ios-paperplane: "\f474";
+@ionicon-var-ios-paperplane-outline: "\f473";
+@ionicon-var-ios-partlysunny: "\f476";
+@ionicon-var-ios-partlysunny-outline: "\f475";
+@ionicon-var-ios-pause: "\f478";
+@ionicon-var-ios-pause-outline: "\f477";
+@ionicon-var-ios-paw: "\f47a";
+@ionicon-var-ios-paw-outline: "\f479";
+@ionicon-var-ios-people: "\f47c";
+@ionicon-var-ios-people-outline: "\f47b";
+@ionicon-var-ios-person: "\f47e";
+@ionicon-var-ios-person-outline: "\f47d";
+@ionicon-var-ios-personadd: "\f480";
+@ionicon-var-ios-personadd-outline: "\f47f";
+@ionicon-var-ios-photos: "\f482";
+@ionicon-var-ios-photos-outline: "\f481";
+@ionicon-var-ios-pie: "\f484";
+@ionicon-var-ios-pie-outline: "\f483";
+@ionicon-var-ios-pint: "\f486";
+@ionicon-var-ios-pint-outline: "\f485";
+@ionicon-var-ios-play: "\f488";
+@ionicon-var-ios-play-outline: "\f487";
+@ionicon-var-ios-plus: "\f48b";
+@ionicon-var-ios-plus-empty: "\f489";
+@ionicon-var-ios-plus-outline: "\f48a";
+@ionicon-var-ios-pricetag: "\f48d";
+@ionicon-var-ios-pricetag-outline: "\f48c";
+@ionicon-var-ios-pricetags: "\f48f";
+@ionicon-var-ios-pricetags-outline: "\f48e";
+@ionicon-var-ios-printer: "\f491";
+@ionicon-var-ios-printer-outline: "\f490";
+@ionicon-var-ios-pulse: "\f493";
+@ionicon-var-ios-pulse-strong: "\f492";
+@ionicon-var-ios-rainy: "\f495";
+@ionicon-var-ios-rainy-outline: "\f494";
+@ionicon-var-ios-recording: "\f497";
+@ionicon-var-ios-recording-outline: "\f496";
+@ionicon-var-ios-redo: "\f499";
+@ionicon-var-ios-redo-outline: "\f498";
+@ionicon-var-ios-refresh: "\f49c";
+@ionicon-var-ios-refresh-empty: "\f49a";
+@ionicon-var-ios-refresh-outline: "\f49b";
+@ionicon-var-ios-reload: "\f49d";
+@ionicon-var-ios-reverse-camera: "\f49f";
+@ionicon-var-ios-reverse-camera-outline: "\f49e";
+@ionicon-var-ios-rewind: "\f4a1";
+@ionicon-var-ios-rewind-outline: "\f4a0";
+@ionicon-var-ios-rose: "\f4a3";
+@ionicon-var-ios-rose-outline: "\f4a2";
+@ionicon-var-ios-search: "\f4a5";
+@ionicon-var-ios-search-strong: "\f4a4";
+@ionicon-var-ios-settings: "\f4a7";
+@ionicon-var-ios-settings-strong: "\f4a6";
+@ionicon-var-ios-shuffle: "\f4a9";
+@ionicon-var-ios-shuffle-strong: "\f4a8";
+@ionicon-var-ios-skipbackward: "\f4ab";
+@ionicon-var-ios-skipbackward-outline: "\f4aa";
+@ionicon-var-ios-skipforward: "\f4ad";
+@ionicon-var-ios-skipforward-outline: "\f4ac";
+@ionicon-var-ios-snowy: "\f4ae";
+@ionicon-var-ios-speedometer: "\f4b0";
+@ionicon-var-ios-speedometer-outline: "\f4af";
+@ionicon-var-ios-star: "\f4b3";
+@ionicon-var-ios-star-half: "\f4b1";
+@ionicon-var-ios-star-outline: "\f4b2";
+@ionicon-var-ios-stopwatch: "\f4b5";
+@ionicon-var-ios-stopwatch-outline: "\f4b4";
+@ionicon-var-ios-sunny: "\f4b7";
+@ionicon-var-ios-sunny-outline: "\f4b6";
+@ionicon-var-ios-telephone: "\f4b9";
+@ionicon-var-ios-telephone-outline: "\f4b8";
+@ionicon-var-ios-tennisball: "\f4bb";
+@ionicon-var-ios-tennisball-outline: "\f4ba";
+@ionicon-var-ios-thunderstorm: "\f4bd";
+@ionicon-var-ios-thunderstorm-outline: "\f4bc";
+@ionicon-var-ios-time: "\f4bf";
+@ionicon-var-ios-time-outline: "\f4be";
+@ionicon-var-ios-timer: "\f4c1";
+@ionicon-var-ios-timer-outline: "\f4c0";
+@ionicon-var-ios-toggle: "\f4c3";
+@ionicon-var-ios-toggle-outline: "\f4c2";
+@ionicon-var-ios-trash: "\f4c5";
+@ionicon-var-ios-trash-outline: "\f4c4";
+@ionicon-var-ios-undo: "\f4c7";
+@ionicon-var-ios-undo-outline: "\f4c6";
+@ionicon-var-ios-unlocked: "\f4c9";
+@ionicon-var-ios-unlocked-outline: "\f4c8";
+@ionicon-var-ios-upload: "\f4cb";
+@ionicon-var-ios-upload-outline: "\f4ca";
+@ionicon-var-ios-videocam: "\f4cd";
+@ionicon-var-ios-videocam-outline: "\f4cc";
+@ionicon-var-ios-volume-high: "\f4ce";
+@ionicon-var-ios-volume-low: "\f4cf";
+@ionicon-var-ios-wineglass: "\f4d1";
+@ionicon-var-ios-wineglass-outline: "\f4d0";
+@ionicon-var-ios-world: "\f4d3";
+@ionicon-var-ios-world-outline: "\f4d2";
+@ionicon-var-ipad: "\f1f9";
+@ionicon-var-iphone: "\f1fa";
+@ionicon-var-ipod: "\f1fb";
+@ionicon-var-jet: "\f295";
+@ionicon-var-key: "\f296";
+@ionicon-var-knife: "\f297";
+@ionicon-var-laptop: "\f1fc";
+@ionicon-var-leaf: "\f1fd";
+@ionicon-var-levels: "\f298";
+@ionicon-var-lightbulb: "\f299";
+@ionicon-var-link: "\f1fe";
+@ionicon-var-load-a: "\f29a";
+@ionicon-var-load-b: "\f29b";
+@ionicon-var-load-c: "\f29c";
+@ionicon-var-load-d: "\f29d";
+@ionicon-var-location: "\f1ff";
+@ionicon-var-lock-combination: "\f4d4";
+@ionicon-var-locked: "\f200";
+@ionicon-var-log-in: "\f29e";
+@ionicon-var-log-out: "\f29f";
+@ionicon-var-loop: "\f201";
+@ionicon-var-magnet: "\f2a0";
+@ionicon-var-male: "\f2a1";
+@ionicon-var-man: "\f202";
+@ionicon-var-map: "\f203";
+@ionicon-var-medkit: "\f2a2";
+@ionicon-var-merge: "\f33f";
+@ionicon-var-mic-a: "\f204";
+@ionicon-var-mic-b: "\f205";
+@ionicon-var-mic-c: "\f206";
+@ionicon-var-minus: "\f209";
+@ionicon-var-minus-circled: "\f207";
+@ionicon-var-minus-round: "\f208";
+@ionicon-var-model-s: "\f2c1";
+@ionicon-var-monitor: "\f20a";
+@ionicon-var-more: "\f20b";
+@ionicon-var-mouse: "\f340";
+@ionicon-var-music-note: "\f20c";
+@ionicon-var-navicon: "\f20e";
+@ionicon-var-navicon-round: "\f20d";
+@ionicon-var-navigate: "\f2a3";
+@ionicon-var-network: "\f341";
+@ionicon-var-no-smoking: "\f2c2";
+@ionicon-var-nuclear: "\f2a4";
+@ionicon-var-outlet: "\f342";
+@ionicon-var-paintbrush: "\f4d5";
+@ionicon-var-paintbucket: "\f4d6";
+@ionicon-var-paper-airplane: "\f2c3";
+@ionicon-var-paperclip: "\f20f";
+@ionicon-var-pause: "\f210";
+@ionicon-var-person: "\f213";
+@ionicon-var-person-add: "\f211";
+@ionicon-var-person-stalker: "\f212";
+@ionicon-var-pie-graph: "\f2a5";
+@ionicon-var-pin: "\f2a6";
+@ionicon-var-pinpoint: "\f2a7";
+@ionicon-var-pizza: "\f2a8";
+@ionicon-var-plane: "\f214";
+@ionicon-var-planet: "\f343";
+@ionicon-var-play: "\f215";
+@ionicon-var-playstation: "\f30a";
+@ionicon-var-plus: "\f218";
+@ionicon-var-plus-circled: "\f216";
+@ionicon-var-plus-round: "\f217";
+@ionicon-var-podium: "\f344";
+@ionicon-var-pound: "\f219";
+@ionicon-var-power: "\f2a9";
+@ionicon-var-pricetag: "\f2aa";
+@ionicon-var-pricetags: "\f2ab";
+@ionicon-var-printer: "\f21a";
+@ionicon-var-pull-request: "\f345";
+@ionicon-var-qr-scanner: "\f346";
+@ionicon-var-quote: "\f347";
+@ionicon-var-radio-waves: "\f2ac";
+@ionicon-var-record: "\f21b";
+@ionicon-var-refresh: "\f21c";
+@ionicon-var-reply: "\f21e";
+@ionicon-var-reply-all: "\f21d";
+@ionicon-var-ribbon-a: "\f348";
+@ionicon-var-ribbon-b: "\f349";
+@ionicon-var-sad: "\f34a";
+@ionicon-var-sad-outline: "\f4d7";
+@ionicon-var-scissors: "\f34b";
+@ionicon-var-search: "\f21f";
+@ionicon-var-settings: "\f2ad";
+@ionicon-var-share: "\f220";
+@ionicon-var-shuffle: "\f221";
+@ionicon-var-skip-backward: "\f222";
+@ionicon-var-skip-forward: "\f223";
+@ionicon-var-social-android: "\f225";
+@ionicon-var-social-android-outline: "\f224";
+@ionicon-var-social-angular: "\f4d9";
+@ionicon-var-social-angular-outline: "\f4d8";
+@ionicon-var-social-apple: "\f227";
+@ionicon-var-social-apple-outline: "\f226";
+@ionicon-var-social-bitcoin: "\f2af";
+@ionicon-var-social-bitcoin-outline: "\f2ae";
+@ionicon-var-social-buffer: "\f229";
+@ionicon-var-social-buffer-outline: "\f228";
+@ionicon-var-social-chrome: "\f4db";
+@ionicon-var-social-chrome-outline: "\f4da";
+@ionicon-var-social-codepen: "\f4dd";
+@ionicon-var-social-codepen-outline: "\f4dc";
+@ionicon-var-social-css3: "\f4df";
+@ionicon-var-social-css3-outline: "\f4de";
+@ionicon-var-social-designernews: "\f22b";
+@ionicon-var-social-designernews-outline: "\f22a";
+@ionicon-var-social-dribbble: "\f22d";
+@ionicon-var-social-dribbble-outline: "\f22c";
+@ionicon-var-social-dropbox: "\f22f";
+@ionicon-var-social-dropbox-outline: "\f22e";
+@ionicon-var-social-euro: "\f4e1";
+@ionicon-var-social-euro-outline: "\f4e0";
+@ionicon-var-social-facebook: "\f231";
+@ionicon-var-social-facebook-outline: "\f230";
+@ionicon-var-social-foursquare: "\f34d";
+@ionicon-var-social-foursquare-outline: "\f34c";
+@ionicon-var-social-freebsd-devil: "\f2c4";
+@ionicon-var-social-github: "\f233";
+@ionicon-var-social-github-outline: "\f232";
+@ionicon-var-social-google: "\f34f";
+@ionicon-var-social-google-outline: "\f34e";
+@ionicon-var-social-googleplus: "\f235";
+@ionicon-var-social-googleplus-outline: "\f234";
+@ionicon-var-social-hackernews: "\f237";
+@ionicon-var-social-hackernews-outline: "\f236";
+@ionicon-var-social-html5: "\f4e3";
+@ionicon-var-social-html5-outline: "\f4e2";
+@ionicon-var-social-instagram: "\f351";
+@ionicon-var-social-instagram-outline: "\f350";
+@ionicon-var-social-javascript: "\f4e5";
+@ionicon-var-social-javascript-outline: "\f4e4";
+@ionicon-var-social-linkedin: "\f239";
+@ionicon-var-social-linkedin-outline: "\f238";
+@ionicon-var-social-markdown: "\f4e6";
+@ionicon-var-social-nodejs: "\f4e7";
+@ionicon-var-social-octocat: "\f4e8";
+@ionicon-var-social-pinterest: "\f2b1";
+@ionicon-var-social-pinterest-outline: "\f2b0";
+@ionicon-var-social-python: "\f4e9";
+@ionicon-var-social-reddit: "\f23b";
+@ionicon-var-social-reddit-outline: "\f23a";
+@ionicon-var-social-rss: "\f23d";
+@ionicon-var-social-rss-outline: "\f23c";
+@ionicon-var-social-sass: "\f4ea";
+@ionicon-var-social-skype: "\f23f";
+@ionicon-var-social-skype-outline: "\f23e";
+@ionicon-var-social-snapchat: "\f4ec";
+@ionicon-var-social-snapchat-outline: "\f4eb";
+@ionicon-var-social-tumblr: "\f241";
+@ionicon-var-social-tumblr-outline: "\f240";
+@ionicon-var-social-tux: "\f2c5";
+@ionicon-var-social-twitch: "\f4ee";
+@ionicon-var-social-twitch-outline: "\f4ed";
+@ionicon-var-social-twitter: "\f243";
+@ionicon-var-social-twitter-outline: "\f242";
+@ionicon-var-social-usd: "\f353";
+@ionicon-var-social-usd-outline: "\f352";
+@ionicon-var-social-vimeo: "\f245";
+@ionicon-var-social-vimeo-outline: "\f244";
+@ionicon-var-social-whatsapp: "\f4f0";
+@ionicon-var-social-whatsapp-outline: "\f4ef";
+@ionicon-var-social-windows: "\f247";
+@ionicon-var-social-windows-outline: "\f246";
+@ionicon-var-social-wordpress: "\f249";
+@ionicon-var-social-wordpress-outline: "\f248";
+@ionicon-var-social-yahoo: "\f24b";
+@ionicon-var-social-yahoo-outline: "\f24a";
+@ionicon-var-social-yen: "\f4f2";
+@ionicon-var-social-yen-outline: "\f4f1";
+@ionicon-var-social-youtube: "\f24d";
+@ionicon-var-social-youtube-outline: "\f24c";
+@ionicon-var-soup-can: "\f4f4";
+@ionicon-var-soup-can-outline: "\f4f3";
+@ionicon-var-speakerphone: "\f2b2";
+@ionicon-var-speedometer: "\f2b3";
+@ionicon-var-spoon: "\f2b4";
+@ionicon-var-star: "\f24e";
+@ionicon-var-stats-bars: "\f2b5";
+@ionicon-var-steam: "\f30b";
+@ionicon-var-stop: "\f24f";
+@ionicon-var-thermometer: "\f2b6";
+@ionicon-var-thumbsdown: "\f250";
+@ionicon-var-thumbsup: "\f251";
+@ionicon-var-toggle: "\f355";
+@ionicon-var-toggle-filled: "\f354";
+@ionicon-var-transgender: "\f4f5";
+@ionicon-var-trash-a: "\f252";
+@ionicon-var-trash-b: "\f253";
+@ionicon-var-trophy: "\f356";
+@ionicon-var-tshirt: "\f4f7";
+@ionicon-var-tshirt-outline: "\f4f6";
+@ionicon-var-umbrella: "\f2b7";
+@ionicon-var-university: "\f357";
+@ionicon-var-unlocked: "\f254";
+@ionicon-var-upload: "\f255";
+@ionicon-var-usb: "\f2b8";
+@ionicon-var-videocamera: "\f256";
+@ionicon-var-volume-high: "\f257";
+@ionicon-var-volume-low: "\f258";
+@ionicon-var-volume-medium: "\f259";
+@ionicon-var-volume-mute: "\f25a";
+@ionicon-var-wand: "\f358";
+@ionicon-var-waterdrop: "\f25b";
+@ionicon-var-wifi: "\f25c";
+@ionicon-var-wineglass: "\f2b9";
+@ionicon-var-woman: "\f25d";
+@ionicon-var-wrench: "\f2ba";
+@ionicon-var-xbox: "\f30c";

styles/common/iconfont/ionicons.less

@@ -0,0 +1,3 @@
+@import "_ionicons-variables";
+@import "_ionicons-font";
+@import "_ionicons-icons";

styles/common/index.less

@@ -0,0 +1,4 @@
+@import "base";
+@import "iconfont/ionicons";
+@import "layout";
+@import "transition";