Echo wheel

一个用 Vue 写的 UI 框架

Version: 1.0.0 Updated: 06/26/2019

By: zyqq License: MIT

Downloads Last 30 Days: 52

Install

npm i echo-wheel
yarn add echo-wheel

Repository: https://github.com/zyqq/wheel

CDNs

bundle.run: https://bundle.run/echo-wheel

jsDelivr: https://cdn.jsdelivr.net/npm/echo-wheel

unpkg: https://unpkg.com/echo-wheel

Echo Wheel logo

Build Status Downloads Version License

Echo Wheel -- 一个用 Vue 写的 UI 框架

介绍

这是我在学习 Vue 中写的一个 UI 框架,希望对你有用。可查看 官方文档 预览 👀

开始使用

  1. 添加 css 样式

    使用此框架前,请再 css 中开启 border-box

     *, *::before, *::after {
       box-sizing: border-box;
     }

    IE8 及以上浏览器均支持此样式

    你还需要设置默认样式等变量(后续会改为 SCSS 变量)

     :root {
       --button-height: 32px;
       --button-bg: white;
       --button-active-bg: #eee;
       --font-size: 14px;
       --border-radius: 4px;
       --color: #999;
       --border-color: #999;
       --border-color-hover: #666;
     }

    IE15 及以上浏览器均支持此样式

  2. 安装 echo-wheel

    npm install --save echo-wheel 或者 yarn add echo-wheel

  3. 引入 echo-wheel

     import { Button } from 'echo-wheel'
     import 'echo-wheel/dist/echo-wheel.css'
    
     export defult {
       components: {
         'w-button': Button
       }
     }
  4. 使用组件

       <w-buttton>欢迎使用轮子组件<w-button>

提问

欢迎 提issue

变更记录

  • 简单轮子:按钮(Button)、输入框(Input)、网格(Grid)、布局(Layout)、提示(Toast)、标签页(Tabs)、弹出层(Popover)、折叠面板(Collapse)
  • 进阶轮子:级联选择(Cascader)、无缝轮播(Slides)、响应式导航条(Nav)、分页(Pager)、表单验证(Validate)、图片上传(Uploader)、粘滞组件(Sticky)
  • 高级轮子:滚动条(Scroll)、日期选择器(DatePicker)、表格(Table)

详情变更记录在 releases.

联系方式

可扫描以下二维码添加本人微信公众号留言😄

贡献代码

每个分支名称代表完成组件名,目前提交顺序是

button-and-input -> row-and-col -> grid-and-layout -> toast -> tabs -> popover -> collapse -> cascader -> slides -> nav -> validate -> page -> table -> uploader -> sticky -> date-picker -> scroll

可按照此顺序查看分支以获得具体组件完成时的提交记录,按此学习编写组件的源代码。欢迎有想法有需求的小伙伴 提issue 或者一起来造轮子 😊

感谢以下贡献者😄:

证书

MIT

Copyright (c) 2019-present, Yiqiu (Echo) Zheng

Categories: Vue js
Tags: VueUIWheel